You clicked {count} times

); }; `})}),` `,(0,n.jsxs)(e.p,{children:["The hook returns two values: the current ",(0,n.jsx)(e.code,{children:"value"})," and a ",(0,n.jsx)(e.code,{children:"function"})," to update the value."]}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsx)(e.h2,{children:"2. useEffect"}),` `,(0,n.jsxs)(e.p,{children:["Another common hook is the ",(0,n.jsx)(e.code,{children:"useEffect"}),". This is similar to the ",(0,n.jsx)(e.code,{children:"componentDidMount"})," in Class Components."]}),` `,(0,n.jsx)(e.p,{children:"They are used to run side effects. They are mainly used when you want to perform any manipulations with every state change or when only a certain value changes."}),` `,(0,n.jsxs)(e.p,{children:["Let's use the previous example and use ",(0,n.jsx)(e.code,{children:"useEffect"})," to log the value of count every time it changes."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import React, { useState, useEffect } from "react"; const App = () => { const [count, setCount] = useState(0); useEffect(() => { console.log(count); }, [count]); return (

You clicked {count} times

); }; `})}),` `,(0,n.jsxs)(e.p,{children:["You can also return a function from ",(0,n.jsx)(e.code,{children:"useEffect"})," to do any clean up. It is executed when the component unmounts."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`useEffect(() => { console.log(count); return () => { setCount(0); }; }, [count]); `})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsx)(e.h2,{children:"3. useMemo"}),` `,(0,n.jsxs)(e.p,{children:["This hooks is used to keep expensive functions from running again and again. They return a ",(0,n.jsx)(e.code,{children:"memoized"})," value and are updated only when one of the dependencies update."]}),` `,(0,n.jsx)(e.p,{children:"Let us consider that we have two state variables and an resource intensive / expensive function that takes one of the variables as param."}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import React, { useState, useEffect } from "react"; const App = () => { const [count, setCount] = useState(0); const [todos, setTodos] = useState([]); const calculation = expensiveCalculation(count); useEffect(() => { console.log(count); }, [count]); const addTodo = (todo) => { setTodos((t) => [...t, "todo"]); }; return (

You clicked {count} times

); }; const expensiveCalculation = (num) => { console.log("Calculating..."); // Do some Intensive Task return num; }; `})}),` `,(0,n.jsx)(e.p,{children:"In the above example even though the calculation doesn't have anything to do with todo, we can see that the calculation is done for every render even when the count value hasn't been updated."}),` `,(0,n.jsxs)(e.p,{children:["To fix this we can simply wrap the function in a ",(0,n.jsx)(e.code,{children:"useMemo"})," hook and pass in count as the dependency."]}),` `,(0,n.jsx)(e.p,{children:"const calculation = useMemo(() => expensiveCalculation(count), [count]);"}),` `,(0,n.jsx)(e.p,{children:"This will make sure that the calculation is calculated only when the count value gets updated."}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsx)(e.h2,{children:"4. useCallback"}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"useCallback"})," and ",(0,n.jsx)(e.code,{children:"useMemo"})," Hooks are similar. The main difference is that useMemo returns a memoized value and useCallback returns a memoized function. Let's modify the above example to create a child component to visualize the use of ",(0,n.jsx)(e.code,{children:"useCallback"})," better."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import React, { useState, useCallback } from "react"; import Todos from "./Todos"; const App = () => { const [count, setCount] = useState(0); const [todos, setTodos] = useState([]); const addTodo = (todo) => { setTodos((t) => [...t, "todo"]); }; return (

You clicked {count} times

); }; `})}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`// Todos.js import { memo } from "react"; const Todos = ({ todos, addTodo }) => { console.log("child render"); return ( <>

My Todos

{todos.map((todo, index) => { return

{todo}

; })} ); }; export default memo(Todos); `})}),` `,(0,n.jsxs)(e.p,{children:["When we try to increase the count, we can see that the Todos component is also getting re rendered. It is because every time a component gets re-rendered, its functions get recreated. Due to this the ",(0,n.jsx)(e.code,{children:"addTodo"})," function isn't the same function as before."]}),` `,(0,n.jsxs)(e.p,{children:["To prevent this, we can use the ",(0,n.jsx)(e.code,{children:"useCallback"})," hook."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`const addTodo = useCallback(() => { setTodos((t) => [...t, "New Todo"]); }, [todos]); `})}),` `,(0,n.jsxs)(e.p,{children:["Now ",(0,n.jsx)(e.code,{children:"Todos"})," will get re-rendered only when ",(0,n.jsx)(e.code,{children:"todos"})," prop changes."]}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsx)(e.h2,{children:"5. useRef"}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"useRef"})," Hook allows you to persist values between renders."]}),` `,(0,n.jsx)(e.p,{children:"It can be used to access a DOM element directly."}),` `,(0,n.jsxs)(e.p,{children:["In React, we can add a ",(0,n.jsx)(e.code,{children:"ref"})," attribute to an element to access it directly in the DOM."]}),` `,(0,n.jsx)(e.p,{children:"Here's a simple example to see how you can access DOM elements using useRef."}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import React, { useRef } from "react"; const App = () => { const inputElement = useRef(); const focusInput = () => { inputElement.current.focus(); }; return ( <> ); }; export default App; `})}),` `,(0,n.jsxs)(e.p,{children:["Apart from this, there is much more you can do with hooks. You can even create your own hooks. Check this doc from the ",(0,n.jsx)(e.a,{href:"https://legacy.reactjs.org/docs/hooks-custom.html",children:"React Docs"})," site to learn more about how you can achieve it."]})]})}function C(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var y=C;return T(w);})(); ;return Component;

Our Blog

Basics of Docker

Useful Kubernetes Commands

MongoDB's ObjectId Explained

Top 5 React Hooks