JAVASCRIPT

usecallback in react

//useCallback is hook that return memorized version of callback function
//only changes when one of dependency is changed
import {useState,useCallback} from 'react'
const [increment,setIncrement]=useState(0)
const [otherCounter,setOtherCounter]=useState(0) 
//useCallback(callback,dependencies)
const increment= useCallback(()=> {
  setCount(count+1)
},[count])

const incrementOtherCounter= useCallback(()=> {
setOtherCounter(otherCounter+1)
},[otherCounter])

usecallback

import React, { memo, useCallback, useState } from 'react'

const Logger = memo((props) => {
  props.log()
  return null
})

export default function App() {
  const [count, setCount] = useState(0)
  const count5 = Math.floor(count / 5)

  const memoizedFunction = useCallback(() => {
    console.log('useCallback')
  }, [count5])

  const normalFunction = () => {
    console.log('normal')
  }

  return (
    <>
      <button
        onClick={() => {
          setCount(count + 1)
        }}
      >
        Increment {count}
      </button>
      <Logger log={memoizedFunction} />
      <Logger log={normalFunction} />
    </>
  )
}

react usecallback

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

usecallback hook

//useCallback to remove too much re-render  
const checkFromLocalStorage = useCallback(() => {
    if (localStorage.getItem('connectedWallet')) {
      //check connectWallet with switch
      switch (localStorage.getItem('connectedWallet')) {
        case 'walletConnect':
          activate(WalletConnect);
        case 'metamask':
          activate(Injected);
        default:
      }
    }
  }, [active]);

  useEffect(() => {
    checkFromLocalStorage();
  }, [active]);

React useCallback Hook

//todos.js
import { memo } from "react";

const Todos = ({ todos, addTodo }) => {
  console.log("child render");
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>;
      })}
      <button onClick={addTodo}>Add Todo</button>
    </>
  );
};

export default memo(Todos);

react import useCallBack

import { useCallback } from 'react'

usecallback in react

useCallback is a react hook which is used for the memorisation of the callback
function as we know in react every component re-rendered so its function also re 
created and so avoid the recreation of complex functions we used the concept of
useCallback which takes a function as a arguement and a dependency list for 
which condition the component are going to create itself;