react-13

Author: abhishekrathore

src/App.js

@@ -1,4 +1,4 @@
-import { useReducer, useState } from 'react';
+import { useCallback, useReducer, useState } from 'react';
 import './App.css';
 import AddVideo from './components/AddVideo';
 import videoDB from './data/data';
@@ -35,9 +35,10 @@ function App() {
   }
   const [videos, dispatch] = useReducer(videoReducer, []);
 
-  function editVideo(id) {
+  const editVideo = useCallback(function editVideo(id) {
     setEditableVideo(videos.find((video) => video.id === id));
-  }
+  },[videos])
+  
 
   return (
     <ThemeContext.Provider value={mode}>

src/components/Counter.js

@@ -1,8 +1,10 @@
-import { useRef, useState } from "react";
+import { useMemo, useRef, useState, useCallback } from "react";
+
+
 
 function Counter(){
     console.log('render Counter')
-    const [number, setNumber] = useState(0);
+    const [number, setNumber] = useState(10);
     let num = useRef(0);
 
     function handleClick(e){
@@ -16,9 +18,20 @@ function Counter(){
         console.log(num.current)
     }
 
+   const fibFx = useCallback(function fib(n){  //1,1,2,3,5
+        if(n===1 || n===2){
+            return 1
+        }
+        return fib(n-1)+fib(n-2)
+    },[])
+
+   
+    const fibMemoized = useMemo(()=>fibFx(number),[number,fibFx]) 
+
     return(
         <>
-        <h1 style={{color:'white'}}>{number}</h1>
+        
+        <h1 style={{color:'white'}}>{number} | {fibMemoized}</h1>
         <button onClick={handleClick}>Add</button>
         </>
     )

src/components/PlayButton.js

@@ -1,8 +1,8 @@
 import './PlayButton.css';
-import { useContext, useState } from 'react';
+import { useContext, useState, memo } from 'react';
 import ThemeContext from '../context/ThemeContext';
 
-function PlayButton({message,children,onPlay,onPause}){
+const PlayButton = memo(function PlayButton({message,children,onPlay,onPause}){
     console.log('render PlayButton')
     const theme = useContext(ThemeContext)
 
@@ -21,6 +21,6 @@ function PlayButton({message,children,onPlay,onPause}){
         <button className={theme} onClick={handleClick}>{children} : {playing?'⏸️':'⏯️'}</button>
     )
 
-}
+});
 
 export default PlayButton;

src/components/Video.js

@@ -1,9 +1,9 @@
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect,memo } from 'react';
 import ThemeContext from '../context/ThemeContext';
 import useVideoDispatch from '../hooks/VideoDispatch';
 import './Video.css';
 
-function Video({title,id,channel="Coder Dost",views,time,verified,children,editVideo}) {
+const Video = memo(function Video({title,id,channel="Coder Dost",views,time,verified,children,editVideo}) {
   console.log('render Video',id)
    const theme = useContext(ThemeContext)
    const dispatch = useVideoDispatch()
@@ -42,6 +42,6 @@ function Video({title,id,channel="Coder Dost",views,time,verified,children,editV
       </div>
       </>
   );
-}
+})
 
 export default Video;

src/components/VideoList.js

@@ -1,56 +1,57 @@
-import Video from "./Video";
-import PlayButton from "./PlayButton";
-import useVideos from "../hooks/Videos";
+import Video from './Video';
+import PlayButton from './PlayButton';
+import useVideos from '../hooks/Videos';
 import axios from 'axios';
-import {useState, useEffect} from 'react';
-import useVideoDispatch from "../hooks/VideoDispatch";
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import useVideoDispatch from '../hooks/VideoDispatch';
 
-function VideoList({editVideo}){
-   const url ="https://my.api.mockaroo.com/video.json?key=2a12c4d0"
+function VideoList({ editVideo }) {
+  const url = 'https://my.api.mockaroo.com/video.json?key=2a12c4d0';
 
-   const videos = useVideos()
-   const dispatch = useVideoDispatch();
+  const videos = useVideos();
+  const dispatch = useVideoDispatch();
 
-   async function handleClick (){
+  async function handleClick() {
     const res = await axios.get(url);
-    console.log('getVideos', res.data)
-    dispatch({type:'LOAD',payload:res.data})
-   }
+    console.log('getVideos', res.data);
+    dispatch({ type: 'LOAD', payload: res.data });
+  }
 
-  useEffect(()=>{
-    async function getVideos (){
+  useEffect(() => {
+    async function getVideos() {
       const res = await axios.get(url);
-      console.log('getVideos', res.data)
-      dispatch({type:'LOAD',payload:res.data})
-     }
-     getVideos()
-  },[dispatch])
+      console.log('getVideos', res.data);
+      dispatch({ type: 'LOAD', payload: res.data });
+    }
+    getVideos();
+  }, [dispatch]);
 
-
-    return(
-        <>
-        {videos.map((video) => (
-            <Video
-              key={video.id}
-              title={video.title}
-              views={video.views}
-              time={video.time}
-              channel={video.channel}
-              verified={video.verified}
-              id={video.id}
-              editVideo={editVideo}
-            >
-              <PlayButton
-                onPlay={() => console.log('Playing..',video.title)}
-                onPause={() => console.log('Paused..',video.title)}
-              >
-                {video.title}
-              </PlayButton>
-            </Video>
-          ))}
-          <button onClick={handleClick}>Get Videos</button>
-          </>
-    )
+  const play = useCallback(() => console.log('Playing..'), []);
+  const pause = useCallback(() => console.log('Pause..'), []);
+  const memoButton = useMemo(() => (
+    <PlayButton onPlay={play} onPause={pause}>
+      Play
+    </PlayButton>
+  ),[pause, play]);
+  return (
+    <>
+      {videos.map((video) => (
+        <Video
+          key={video.id}
+          title={video.title}
+          views={video.views}
+          time={video.time}
+          channel={video.channel}
+          verified={video.verified}
+          id={video.id}
+          editVideo={editVideo}
+        >
+          {memoButton}
+        </Video>
+      ))}
+      <button onClick={handleClick}>Get Videos</button>
+    </>
+  );
 }
 
-export default VideoList
+export default VideoList;