var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var u=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),f=(n,l)=>{for(var r in l)s(n,r,{get:l[r],enumerable:!0})},a=(n,l,r,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let c of y(l))!C.call(n,c)&&c!==r&&s(n,c,{get:()=>l[c],enumerable:!(o=D(l,c))||o.enumerable});return n};var F=(n,l,r)=>(r=n!=null?p(E(n)):{},a(l||!n||!n.__esModule?s(r,"default",{value:n,enumerable:!0}):r,n)),m=n=>a(s({},"__esModule",{value:!0}),n);var i=u((v,t)=>{t.exports=_jsx_runtime});var g={};f(g,{default:()=>h});var e=F(i());function d(n){let l={a:"a",code:"code",figure:"figure",h2:"h2",h3:"h3",img:"img",li:"li",nav:"nav",ol:"ol",p:"p",pre:"pre",span:"span",ul:"ul",...n.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.nav,{className:"toc",children:(0,e.jsx)(l.ol,{className:"toc-level toc-level-1",children:(0,e.jsxs)(l.li,{className:"toc-item toc-item-h2",children:[(0,e.jsx)(l.a,{className:"toc-link toc-link-h2",href:"#what-are-side-effects-in-react",children:"What are Side Effects in React?"}),(0,e.jsxs)(l.ol,{className:"toc-level toc-level-2",children:[(0,e.jsx)(l.li,{className:"toc-item toc-item-h3",children:(0,e.jsx)(l.a,{className:"toc-link toc-link-h3",href:"#fetching-data",children:"Fetching Data"})}),(0,e.jsx)(l.li,{className:"toc-item toc-item-h3",children:(0,e.jsx)(l.a,{className:"toc-link toc-link-h3",href:"#cleanup-with-side-effects",children:"Cleanup with Side Effects"})}),(0,e.jsx)(l.li,{className:"toc-item toc-item-h3",children:(0,e.jsx)(l.a,{className:"toc-link toc-link-h3",href:"#conditional-effects",children:"Conditional Effects"})}),(0,e.jsx)(l.li,{className:"toc-item toc-item-h3",children:(0,e.jsx)(l.a,{className:"toc-link toc-link-h3",href:"#avoiding-unnecessary-re-renders",children:"Avoiding Unnecessary Re-Renders"})})]})]})})}),(0,e.jsx)(l.p,{children:"In React, side effects refer to anything that affects something outside the scope of a function component, such as updating the DOM, fetching data, or interacting with external APIs. While React encourages declarative programming, side effects are often inevitable when building interactive UIs. Properly managing these effects is crucial for maintaining predictable(testable) and maintainable applications."}),` `,(0,e.jsxs)(l.h2,{id:"what-are-side-effects-in-react",children:["What are Side Effects in React?",(0,e.jsx)(l.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-are-side-effects-in-react",children:(0,e.jsx)(l.span,{className:"icon icon-link"})})]}),` `,(0,e.jsx)(l.p,{children:"In React, side effects typically occur when a component interacts with external systems or modifies shared states. Examples include:"}),` `,(0,e.jsxs)(l.ul,{children:[` `,(0,e.jsx)(l.li,{children:"Fetching data from an API."}),` `,(0,e.jsx)(l.li,{children:"Updating a DOM element directly."}),` `,(0,e.jsx)(l.li,{children:"Logging information to an external service."}),` `,(0,e.jsxs)(l.li,{children:[`Setting up subscriptions or timers. React's `,(0,e.jsx)(l.code,{children:"useEffect"})," hook is the primary tool for handling side effects in functional components."]}),` `]}),` `,(0,e.jsxs)(l.h3,{id:"fetching-data",children:["Fetching Data",(0,e.jsx)(l.a,{"aria-hidden":"true",tabIndex:"-1",href:"#fetching-data",children:(0,e.jsx)(l.span,{className:"icon icon-link"})})]}),` `,(0,e.jsx)(l.p,{children:"Fetching data is a common side effect. Here\u2019s how you can use useEffect to fetch data in a React component:"}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"tsx","data-theme":"andromeeda",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"andromeeda",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", { "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96E072"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" Loading"}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#96E072"},children:' "@/component/Loading"'}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"interface"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" User"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" id"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" number;"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" string;"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" email"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" string;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"}"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" UserList"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:"FC"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"users"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"setUsers"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:"User"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"[]>([]);"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"loading"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"setLoading"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" useEffect"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" fetchUsers"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" async"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" try"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" response"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" await"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" fetch"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#96E072"},children:'"https://jsonplaceholder.typicode.com/users"'}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" data"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" User"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"[] "}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" await"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" response"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:"json"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"();"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" setUsers"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"catch"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"error"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" console"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:"error"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#96E072"},children:'"Error fetching users:"'}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"error"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"finally"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" setLoading"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" }"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" };"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" fetchUsers"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"();"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" }, []);"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#F92672"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"loading"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:"Loading"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" ) "}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#F92672"},children:"ul"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"users"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"email"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" }) "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#F92672"},children:"li"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" key"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"} ({"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"email"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"})"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" ))}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" )}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"};"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" default"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" UserList"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:";"})]})]})})}),` `,(0,e.jsx)(l.p,{children:"In this example:"}),` `,(0,e.jsxs)(l.ul,{children:[` `,(0,e.jsx)(l.li,{children:"The useEffect hook fetches user data when the component mounts."}),` `,(0,e.jsx)(l.li,{children:"The empty dependency array ([]) ensures the effect runs only once."}),` `,(0,e.jsx)(l.li,{children:"The setUsers function modifies the state, which is a controlled side effect."}),` `]}),` `,(0,e.jsx)(l.p,{children:(0,e.jsx)(l.img,{src:"/blogs/flow.png",alt:"side-effects-in-react"})}),` `,(0,e.jsxs)(l.h3,{id:"cleanup-with-side-effects",children:["Cleanup with Side Effects",(0,e.jsx)(l.a,{"aria-hidden":"true",tabIndex:"-1",href:"#cleanup-with-side-effects",children:(0,e.jsx)(l.span,{className:"icon icon-link"})})]}),` `,(0,e.jsxs)(l.p,{children:["Some side effects, like subscriptions or timers, require cleanup to prevent memory leaks. React allows you to return a cleanup function from ",(0,e.jsx)(l.code,{children:"useEffect"}),"."]}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"tsx","data-theme":"andromeeda",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"andromeeda",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", { "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96E072"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" Timer"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:"FC"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"setCount"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F39C12"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" useEffect"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" interval"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" setInterval"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" setCount"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"prevCount"}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" prevCount"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:" +"}),(0,e.jsx)(l.span,{style:{color:"#F39C12"},children:" 1"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#F39C12"},children:"1000"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" clearInterval"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"interval"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" }, []);"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#F92672"},children:"h1"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:">Timer: {"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"} seconds;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"};"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" default"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" Timer"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:";"})]})]})})}),` `,(0,e.jsx)(l.p,{children:"In this example:"}),` `,(0,e.jsxs)(l.ul,{children:[` `,(0,e.jsx)(l.li,{children:"An interval is created in the useEffect hook."}),` `,(0,e.jsx)(l.li,{children:"The cleanup function clears the interval when the component unmounts, preventing memory leaks."}),` `]}),` `,(0,e.jsxs)(l.h3,{id:"conditional-effects",children:["Conditional Effects",(0,e.jsx)(l.a,{"aria-hidden":"true",tabIndex:"-1",href:"#conditional-effects",children:(0,e.jsx)(l.span,{className:"icon icon-link"})})]}),` `,(0,e.jsx)(l.p,{children:"Sometimes, effects depend on specific state or prop changes. This is where dependencies come into play."}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"tsx","data-theme":"andromeeda",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"andromeeda",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", { "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96E072"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" SearchComponent"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:"FC"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"query"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"setQuery"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#96E072"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"results"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"setResults"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"([]);"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" useEffect"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" if"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:"!"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"query"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" setResults"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"([]);"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" }"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" fetchResults"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" async"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" try"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" response"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" await"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" fetch"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#96E072"},children:"`https://api.example.com/search?q="}),(0,e.jsx)(l.span,{style:{color:"#F92672"},children:"${"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"query"}),(0,e.jsx)(l.span,{style:{color:"#F92672"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#96E072"},children:"`"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" data"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" string[] "}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" await"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" response"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:"json"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"();"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" setResults"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"catch"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"error"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" console"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:"error"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#96E072"},children:'"Error fetching search results:"'}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"error"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" }"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" };"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" fetchResults"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"();"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" }, ["}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"query"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"]);"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#F92672"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#F92672"},children:"input"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96E072"},children:'"text"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"query"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" onChange"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" setQuery"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"target"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96E072"},children:'"Search..."'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#F92672"},children:"ul"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"results"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"result"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"index"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#F92672"},children:"li"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" key"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"index"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"}>{"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"result"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" ))}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"};"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" default"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" SearchComponent"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:";"})]})]})})}),` `,(0,e.jsx)(l.p,{children:"In this example:"}),` `,(0,e.jsxs)(l.ul,{children:[` `,(0,e.jsx)(l.li,{children:"The useEffect hook re-runs only when the query state changes."}),` `,(0,e.jsx)(l.li,{children:"The dependency array [query] ensures unnecessary API calls are avoided."}),` `]}),` `,(0,e.jsxs)(l.h3,{id:"avoiding-unnecessary-re-renders",children:["Avoiding Unnecessary Re-Renders",(0,e.jsx)(l.a,{"aria-hidden":"true",tabIndex:"-1",href:"#avoiding-unnecessary-re-renders",children:(0,e.jsx)(l.span,{className:"icon icon-link"})})]}),` `,(0,e.jsx)(l.p,{children:"React re-renders components when states or props change, which can trigger effects unnecessarily. Using tools like useCallback and useMemo can optimize performance."}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"tsx","data-theme":"andromeeda",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"andromeeda",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", { "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"useCallback"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96E072"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" ExpensiveComponent"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:"FC"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"setCount"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F39C12"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" logCount"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" useCallback"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" console"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:"log"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#96E072"},children:'"Count updated:"'}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" }, ["}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"]);"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" useEffect"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" logCount"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"();"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" }, ["}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"logCount"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"]);"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#F92672"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" onClick"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"{() "}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFE66D"},children:" setCount"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#EE5D43"},children:" +"}),(0,e.jsx)(l.span,{style:{color:"#F39C12"},children:" 1"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:")}>Increment Count: {"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"};"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:"};"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C74DED"},children:" default"}),(0,e.jsx)(l.span,{style:{color:"#00E8C6"},children:" ExpensiveComponent"}),(0,e.jsx)(l.span,{style:{color:"#D5CED9"},children:";"})]})]})})}),` `,(0,e.jsx)(l.p,{children:`useCallback memoizes the logCount function, ensuring it only updates when count changes. This prevents unnecessary re-creation of the function and optimizes the effect's behavior.`}),` `,(0,e.jsxs)(l.p,{children:[(0,e.jsx)(l.a,{href:"https://react.dev/reference/react/useEffect",children:"Learn more"})," about useEffect"]})]})}function h(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(d,{...n})}):d(n)}return m(g);})(); ;return Component;