var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var N=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),g=(a,n)=>{for(var s in n)c(a,s,{get:n[s],enumerable:!0})},o=(a,n,s,l)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of h(n))!k.call(a,t)&&t!==s&&c(a,t,{get:()=>n[t],enumerable:!(l=u(n,t))||l.enumerable});return a};var f=(a,n,s)=>(s=a!=null?d(m(a)):{},o(n||!a||!a.__esModule?c(s,"default",{value:a,enumerable:!0}):s,a)),y=a=>o(c({},"__esModule",{value:!0}),a);var r=N((H,i)=>{i.exports=_jsx_runtime});var v={};g(v,{default:()=>x,frontmatter:()=>b});var e=f(r()),b={title:"React Hooks Deep Dive",publishedAt:"2024-04-23",summary:"A comprehensive guide to React Hooks. Learn how to leverage hooks to build powerful and reusable components in React.",tags:["React","React Hooks","JavaScript","Frontend"],readingTime:"7"};function p(a){let n=Object.assign({h2:"h2",h3:"h3",p:"p",ul:"ul",li:"li",ol:"ol",pre:"pre",code:"code",span:"span"},a.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{id:"introduction-to-react-hooks",children:"Introduction to React hooks"}),` `,(0,e.jsx)(n.h3,{id:"what-are-react-hooks",children:"What are React Hooks?"}),` `,(0,e.jsx)(n.p,{children:"React Hooks are a feature introduced in React 16.8 that allows you to use state and other React features without writing a class. They provide a more concise and readable way to manage state and side effects in functional components."}),` `,(0,e.jsx)(n.h3,{id:"why-use-react-hooks",children:"Why Use React Hooks?"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"Hooks enable functional components to have state and lifecycle methods, making them more powerful and flexible."}),` `,(0,e.jsx)(n.li,{children:"They promote code reusability by allowing logic to be encapsulated into reusable functions."}),` `,(0,e.jsx)(n.li,{children:"Hooks simplify complex component hierarchies by reducing the need for wrapper components and higher-order components."}),` `]}),` `,(0,e.jsx)(n.h3,{id:"benefits-of-react-hooks",children:"Benefits of React Hooks"}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsx)(n.li,{children:"Simplicity: Hooks simplify component logic by allowing you to separate concerns into smaller, composable functions."}),` `,(0,e.jsx)(n.li,{children:"Code Reusability: Hooks encourage the creation of reusable logic that can be shared across multiple components."}),` `,(0,e.jsx)(n.li,{children:"Improved Performance: Hooks can lead to better performance optimizations by reducing unnecessary re-renders."}),` `,(0,e.jsx)(n.li,{children:"Easier Testing: Hooks make it easier to test component logic in isolation without relying on complex testing setups."}),` `]}),` `,(0,e.jsx)(n.h2,{id:"rules-of-hooks",children:"Rules of Hooks"}),` `,(0,e.jsx)(n.p,{children:"Before delving into specific examples and use cases, it\u2019s essential to understand the rules of using React hooks to ensure code consistency and prevent unexpected behavior. Adhering to these rules will help maintain the integrity of your components and ensure that hooks are used correctly:"}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsx)(n.li,{children:"Only Call Hooks at the Top Level: Hooks should only be called at the top level of your functional components or other custom hooks. Avoid calling hooks inside loops, conditions, or nested functions to ensure they are called consistently on every render."}),` `,(0,e.jsx)(n.li,{children:"Call Hooks from React Functions: Hooks should only be called from React function components or custom hooks. Avoid calling hooks from regular JavaScript functions, classes, or asynchronous callbacks."}),` `,(0,e.jsx)(n.li,{children:"Only Call Hooks from React Components: Hooks should only be called from within React components or custom hooks. Avoid calling hooks from regular JavaScript functions, as it can lead to unpredictable behavior."}),` `]}),` `,(0,e.jsx)(n.p,{children:"Adhering to these rules ensures that your components are predictable, maintainable, and compatible with future updates to React."}),` `,(0,e.jsx)(n.h2,{id:"usestate-hook-for-state-management",children:"useState hook for State Management"}),` `,(0,e.jsx)(n.h3,{id:"what-is-the-usestate-hook",children:"What is the useState Hook?"}),` `,(0,e.jsx)(n.p,{children:"The useState Hook is a function provided by React that allows functional components to manage state. It returns a stateful value and a function to update that value, similar to this.state and this.setState in class components."}),` `,(0,e.jsx)(n.h3,{id:"syntax",children:"Syntax"}),` `,(0,e.jsx)(n.p,{children:"The useState Hook takes an initial state as its argument and returns an array with two elements: the current state value and a function to update the state."}),` `,(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsx)(n.code,{className:"language-jsx code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"state",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," setState",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useState"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"initialState",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),` `,(0,e.jsx)(n.h3,{id:"example",children:"Example"}),` `,(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," useState ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"2",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Counter"})})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"4",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"count",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," setCount",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useState"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"5",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"You clicked "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"count",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" times"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"9",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token function",children:"setCount"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"count ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"Click me"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"10",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"12",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.h3,{id:"updating-state",children:"Updating State"}),` `,(0,e.jsx)(n.p,{children:"To update the state with the useState Hook, you call the state updater function returned by useState, passing it the new state value."}),` `,(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsx)(n.code,{className:"language-jsx code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token function",children:"setCount"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"count ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),` `,(0,e.jsx)(n.h3,{id:"functional-updates",children:"Functional Updates"}),` `,(0,e.jsx)(n.p,{children:"You can also use functional updates with the useState Hook, especially when the new state value depends on the previous state."}),` `,(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsx)(n.code,{className:"language-jsx code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token function",children:"setCount"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"prevCount"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," prevCount ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),` `,(0,e.jsx)(n.h3,{id:"when-to-use-usestate",children:"When to Use useState"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"Managing local component state."}),` `,(0,e.jsx)(n.li,{children:"Storing data that may change over time within a component."}),` `]}),` `,(0,e.jsx)(n.h2,{id:"useeffect-hook-for-side-effects",children:"useEffect Hook for Side Effects"}),` `,(0,e.jsx)(n.h3,{id:"what-is-the-useeffect-hook",children:"What is the useEffect Hook?"}),` `,(0,e.jsx)(n.p,{children:"The useEffect Hook is used in functional components to perform side effects. It allows you to perform operations such as data fetching, subscriptions, or manually changing the DOM after the component has rendered."}),` `,(0,e.jsx)(n.h3,{id:"syntax-1",children:"Syntax"}),` `,(0,e.jsx)(n.p,{children:"The useEffect Hook accepts two arguments: a function containing the side effect, and an optional array of dependencies. The function will run after every render unless specified otherwise."}),` `,(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// Side effect code here"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"dependencies",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.h3,{id:"example-1",children:"Example"}),` `,(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," useState",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," useEffect ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"2",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"ExampleComponent"})})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"count",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," setCount",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useState"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"5",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"6",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"7",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// Update the document title using the browser API"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"8",children:[" ",(0,e.jsx)(n.span,{className:"token dom variable",children:"document"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"title"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"You clicked "}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"count",(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token string",children:" times"}),(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"9",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"count",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"})," ",(0,e.jsx)(n.span,{className:"token comment",children:"// Only re-run the effect if count changes"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"10",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"12",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"13",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"You clicked "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"count",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" times"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"14",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token function",children:"setCount"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"count ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"Click me"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"15",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"16",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"17",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.h3,{id:"cleanup-function",children:"Cleanup Function"}),` `,(0,e.jsx)(n.p,{children:"You can return a cleanup function from the useEffect Hook, which will be called before the component unmounts or before the effect runs again."}),` `,(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," subscription ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"subscribe"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"3",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"4",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// Cleanup function here"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"5",children:[" subscription",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"unsubscribe"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"6",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.h3,{id:"dependencies",children:"Dependencies"}),` `,(0,e.jsx)(n.p,{children:"By providing a dependency array, you can specify when the effect should be re-run. If the array is empty, the effect only runs once after the initial render."}),` `,(0,e.jsx)(n.h3,{id:"common-use-cases",children:"Common Use Cases"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"Fetching data from an API."}),` `,(0,e.jsx)(n.li,{children:"Subscribing to external events."}),` `,(0,e.jsx)(n.li,{children:"Updating the DOM based on component state."}),` `]}),` `,(0,e.jsx)(n.h2,{id:"usecontext-hook-for-state-management",children:"useContext Hook for State Management"}),` `,(0,e.jsx)(n.h3,{id:"what-is-the-usecontext-hook",children:"What is the useContext Hook?"}),` `,(0,e.jsx)(n.p,{children:"The useContext Hook provides a way to consume context within functional components in React. Context allows you to pass data through the component tree without having to pass props down manually at every level."}),` `,(0,e.jsx)(n.h3,{id:"syntax-2",children:"Syntax"}),` `,(0,e.jsx)(n.p,{children:"The useContext Hook accepts a context object (created with React.createContext) and returns the current context value for that context."}),` `,(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsx)(n.code,{className:"language-jsx code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," value ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useContext"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MyContext"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),` `,(0,e.jsx)(n.h3,{id:"example-2",children:"Example"}),` `,(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," useContext ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"2",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"3",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"ThemeContext"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"createContext"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'light'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"4",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"ThemedButton"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"6",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," theme ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useContext"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"ThemeContext"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"background"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," theme ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"I am styled by theme context!"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"9",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"10",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"App"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"12",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"ThemeContext.Provider"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"value"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"dark",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"13",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"ThemedButton"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"14",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"15",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"16",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsx)(n.h3,{id:"usage-guidelines",children:"Usage Guidelines"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"Use useContext when you need to access the same context in multiple components without needing to pass props down manually."}),` `,(0,e.jsx)(n.li,{children:"Make sure to provide the appropriate context value using Context.Provider higher in the component tree."}),` `]}),` `,(0,e.jsx)(n.h3,{id:"best-practices",children:"Best Practices"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"Avoid excessive nesting of providers and consumers. Place providers at the top level of your application and consumers where they are needed."}),` `,(0,e.jsx)(n.li,{children:"Consider creating separate context objects for different types of data to keep your code organized."}),` `]}),` `,(0,e.jsx)(n.h3,{id:"common-use-cases-1",children:"Common Use Cases"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"Theming: Provide a theme to your entire application."}),` `,(0,e.jsx)(n.li,{children:"Authentication: Pass user authentication status or user details throughout your app."}),` `,(0,e.jsx)(n.li,{children:"Localization: Pass the current language or locale to all components."}),` `]}),` `,(0,e.jsx)(n.h2,{id:"creating-custom-hooks",children:"Creating Custom Hooks"}),` `,(0,e.jsx)(n.h3,{id:"what-are-custom-hooks",children:"What are Custom Hooks?"}),` `,(0,e.jsx)(n.p,{children:"Custom Hooks are JavaScript functions that utilize React\u2019s Hook API. They allow you to extract reusable logic from components, making your code more modular and easier to maintain."}),` `,(0,e.jsx)(n.h3,{id:"benefits-of-custom-hooks",children:"Benefits of Custom Hooks"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"Reusability: Custom Hooks allow you to encapsulate logic and reuse it across multiple components."}),` `,(0,e.jsx)(n.li,{children:"Separation of Concerns: They help separate concerns by abstracting away complex logic from components."}),` `,(0,e.jsx)(n.li,{children:"Simplicity: Custom Hooks promote cleaner and more readable component code by keeping logic separate from UI concerns."}),` `]}),` `,(0,e.jsx)(n.h3,{id:"syntax-3",children:"Syntax"}),` `,(0,e.jsx)(n.p,{children:"To create a custom hook, simply define a JavaScript function prefixed with use. Inside the function, you can use built-in Hooks or other custom Hooks."}),` `,(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," useState",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," useEffect ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"useCustomHook"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"initialValue"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"value",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," setValue",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useState"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"initialValue",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// Optional effect logic..."}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"value",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," value",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsx)(n.h3,{id:"example-3",children:"Example"}),` `,(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," useState ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"useCounter"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:["initialCount",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," step"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"count",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," setCount",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useState"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"initialCount",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"increment"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token function",children:"setCount"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"count ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," step",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"decrement"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token function",children:"setCount"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"count ",(0,e.jsx)(n.span,{className:"token operator",children:"-"})," step",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," count",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," increment",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," decrement ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsx)(n.h3,{id:"usage",children:"Usage"}),` `,(0,e.jsx)(n.p,{children:"You can use custom hooks just like built-in hooks within functional components."}),` `,(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"CounterComponent"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," count",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," increment",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," decrement ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useCounter"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"Count: "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"count",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"increment",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"Increment"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"decrement",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"Decrement"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsx)(n.h3,{id:"best-practices-1",children:"Best Practices"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"Name Convention: Prefix custom hook names with use to indicate that they follow the Hook API."}),` `,(0,e.jsx)(n.li,{children:"Single Responsibility: Aim for single-responsibility custom hooks to keep them focused and reusable."}),` `,(0,e.jsx)(n.li,{children:"Dependency Arrays: Use dependency arrays in useEffect within custom hooks to manage side effects."}),` `]}),` `,(0,e.jsx)(n.h3,{id:"common-use-cases-2",children:"Common Use Cases"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"Data Fetching: Abstracting API calls and data fetching logic."}),` `,(0,e.jsx)(n.li,{children:"Form State Management: Managing form state and validation logic."}),` `,(0,e.jsx)(n.li,{children:"Animation: Creating reusable animation effects."}),` `,(0,e.jsx)(n.li,{children:"Event Listeners: Handling event listeners and subscriptions."}),` `]}),` `,(0,e.jsx)(n.h2,{id:"best-practices-2",children:"Best Practices"}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsx)(n.li,{children:"Understand the React Component Lifecycle: Have a solid understanding of the React component lifecycle to know when and where to use hooks effectively. Hooks like useState and useEffect mimic class component behavior but with a more concise syntax."}),` `,(0,e.jsx)(n.li,{children:"Follow the Rules of Hooks: Adhere to the Rules of Hooks to ensure hooks are only called from within functional components or custom hooks. Avoid calling hooks conditionally or within nested functions."}),` `,(0,e.jsx)(n.li,{children:"Keep Hooks Near Related Logic: Place hooks near related logic within your functional components to maintain readability and organization. This makes it easier for other developers to understand the component\u2019s behavior."}),` `,(0,e.jsx)(n.li,{children:"Use Memoization for Performance: Utilize memoization techniques such as useMemo and useCallback to optimize performance by memoizing expensive calculations or preventing unnecessary re-renders."}),` `,(0,e.jsx)(n.li,{children:"Leverage Custom Hooks for Reusability: Abstract shared logic into custom hooks for reusability across multiple components. Custom hooks allow you to encapsulate complex behavior and promote a modular codebase."}),` `]}),` `,(0,e.jsx)(n.h2,{id:"common-pitfalls",children:"Common Pitfalls"}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsx)(n.li,{children:"Missing Dependency Arrays in useEffect: Forgetting to include dependency arrays in useEffect can lead to bugs and unexpected behavior. Always specify dependencies to ensure the effect runs only when necessary."}),` `,(0,e.jsx)(n.li,{children:"Mutating State Directly: Avoid mutating state directly when using hooks like useState or useReducer. Instead, use the setter function provided by these hooks to update state immutably."}),` `,(0,e.jsx)(n.li,{children:"Accidental Infinite Loops: Be cautious when using hooks like useEffect to prevent accidental infinite loops. Ensure that the dependencies array is properly defined and that side effects are handled appropriately."}),` `,(0,e.jsx)(n.li,{children:"Overusing useState for Complex State: Reserve useState for managing simple, independent state variables. For complex state management, consider using useReducer or custom hooks to maintain a more organized codebase."}),` `,(0,e.jsx)(n.li,{children:"Not Cleaning Up Effects: Remember to clean up any side effects in the useEffect hook by returning a cleanup function. This prevents memory leaks and ensures that resources are properly released."}),` `]}),` `,(0,e.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),` `,(0,e.jsx)(n.p,{children:"In this deep dive into React hooks, we\u2019ve explored the fundamental hooks provided by React and learned how they revolutionize state management and side effects handling in functional components."}),` `,(0,e.jsx)(n.p,{children:"From useState for managing component state to useEffect for handling side effects, useContext for global state management, and custom hooks for code reusability, React hooks offer a powerful and intuitive way to build modern web applications."}),` `,(0,e.jsx)(n.p,{children:"By mastering React hooks, you can streamline your development workflow, write cleaner and more maintainable code, and unlock new possibilities for building dynamic and responsive user interfaces."})]})}function w(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(p,a)})):p(a)}var x=w;return y(v);})(); ;return Component;

Mario Yonan

Apr 30, 2024

Apr 23, 2024

Apr 15, 2024