const{Fragment:e,jsx:n,jsxs:l}=arguments[0];function _createMdxContent(c){const r={code:"code",figure:"figure",p:"p",pre:"pre",span:"span",...c.components},{Heading:o,Paragraph:t}=r;return o||_missingMdxReference("Heading",!0),t||_missingMdxReference("Paragraph",!0),l(e,{children:[n(o,{type:"danger",children:"Introduction"}),"\n",n(t,{children:l(r.p,{children:["The ",n(r.code,{children:"useEffect"})," Hook is one of the most powerful and commonly used Hooks in React. It allows functional components to perform side effects, such as data fetching, subscriptions, or manually changing the DOM, after the component has been rendered."]})}),"\n",n(t,{children:l(r.p,{children:["In this tutorial, we'll dive into the ",n(r.code,{children:"useEffect"})," Hook and explore how it can be used to manage side effects in functional components."]})}),"\n",l(o,{children:["What is the ",n(r.code,{children:"useEffect"})," Hook?"]}),"\n",n(t,{children:l(r.p,{children:["The ",n(r.code,{children:"useEffect"})," Hook is a function provided by React that enables us to perform side effects in functional components. It is similar to life cycle methods in class components, such as ",n(r.code,{children:"componentDidMount"}),", ",n(r.code,{children:"componentDidUpdate"}),", and ",n(r.code,{children:"componentWillUnmount"}),"."]})}),"\n",n(t,{children:l(r.p,{children:["The ",n(r.code,{children:"useEffect"}),' Hook accepts a function as its first argument, which will be executed after the component is rendered. This function is called the "effect". Additionally, you can provide an optional second argument to specify when the effect should be executed.']})}),"\n",n(o,{children:"Basic Usage"}),"\n",l(t,{children:["Let's start by looking at the basic syntax of ",n(r.code,{children:"useEffect"}),":"]}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React, { useState, useEffect } "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#B392F0"},children:" MyComponent"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" () "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" useEffect"}),n(r.span,{style:{color:"#E1E4E8"},children:"(() "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:" // Effect code here"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" console."}),n(r.span,{style:{color:"#B392F0"},children:"log"}),n(r.span,{style:{color:"#E1E4E8"},children:"("}),n(r.span,{style:{color:"#9ECBFF"},children:"'Component rendered'"}),n(r.span,{style:{color:"#E1E4E8"},children:");"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" }, []); "}),n(r.span,{style:{color:"#6A737D"},children:"// Empty dependency array means the effect runs only once after the initial render"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"p"}),n(r.span,{style:{color:"#E1E4E8"},children:">Component with useEffect Hook"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" );"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"};"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" MyComponent;"})]})]})})}),"\n",n(t,{children:l(r.p,{children:["In the example above, we have a functional component ",n(r.code,{children:"MyComponent"})," that uses the ",n(r.code,{children:"useEffect"})," Hook. The effect specified in ",n(r.code,{children:"useEffect"})," is executed after the component is rendered. In this case, it simply logs a message to the console. Since we provided an empty dependency array as the second argument, the effect runs only once after the initial render."]})}),"\n",n(o,{children:"Dependency Array"}),"\n",n(t,{children:l(r.p,{children:["The second argument of the ",n(r.code,{children:"useEffect"})," Hook is an array of dependencies. By specifying dependencies, you can control when the effect should run. If the dependency array is empty, the effect runs only once after the initial render. If you provide one or more dependencies, the effect will run after every render if any of the dependencies have changed."]})}),"\n",n(t,{children:l(r.p,{children:["Here's an example of using dependencies in ",n(r.code,{children:"useEffect"}),":"]})}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"import"}),n(r.span,{style:{color:"#E1E4E8"},children:" React, { useState, useEffect } "}),n(r.span,{style:{color:"#F97583"},children:"from"}),n(r.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(r.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"const"}),n(r.span,{style:{color:"#B392F0"},children:" MyComponent"}),n(r.span,{style:{color:"#F97583"},children:" ="}),n(r.span,{style:{color:"#E1E4E8"},children:" () "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" const"}),n(r.span,{style:{color:"#E1E4E8"},children:" ["}),n(r.span,{style:{color:"#79B8FF"},children:"count"}),n(r.span,{style:{color:"#E1E4E8"},children:", "}),n(r.span,{style:{color:"#79B8FF"},children:"setCount"}),n(r.span,{style:{color:"#E1E4E8"},children:"] "}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#B392F0"},children:" useState"}),n(r.span,{style:{color:"#E1E4E8"},children:"("}),n(r.span,{style:{color:"#79B8FF"},children:"0"}),n(r.span,{style:{color:"#E1E4E8"},children:");"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:" useEffect"}),n(r.span,{style:{color:"#E1E4E8"},children:"(() "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:" // Effect code here"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" console."}),n(r.span,{style:{color:"#B392F0"},children:"log"}),n(r.span,{style:{color:"#E1E4E8"},children:"("}),n(r.span,{style:{color:"#9ECBFF"},children:"'Count changed:'"}),n(r.span,{style:{color:"#E1E4E8"},children:", count);"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" }, [count]); "}),n(r.span,{style:{color:"#6A737D"},children:"// Run the effect whenever 'count' changes"})]}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"div"}),n(r.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"p"}),n(r.span,{style:{color:"#E1E4E8"},children:">Count: {count}"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" <"}),n(r.span,{style:{color:"#85E89D"},children:"button"}),n(r.span,{style:{color:"#B392F0"},children:" onClick"}),n(r.span,{style:{color:"#F97583"},children:"="}),n(r.span,{style:{color:"#E1E4E8"},children:"{() "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#B392F0"},children:" setCount"}),n(r.span,{style:{color:"#E1E4E8"},children:"(count "}),n(r.span,{style:{color:"#F97583"},children:"+"}),n(r.span,{style:{color:"#79B8FF"},children:" 1"}),n(r.span,{style:{color:"#E1E4E8"},children:")}>Increment"})]}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" );"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"};"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:"export"}),n(r.span,{style:{color:"#F97583"},children:" default"}),n(r.span,{style:{color:"#E1E4E8"},children:" MyComponent;"})]})]})})}),"\n",n(t,{children:l(r.p,{children:["In this example, the effect specified in ",n(r.code,{children:"useEffect"})," runs whenever the ",n(r.code,{children:"count"})," state variable changes. This ensures that the effect is executed only when necessary."]})}),"\n",n(o,{children:"Cleanup"}),"\n",n(t,{children:n(r.p,{children:"Sometimes, effects may require cleanup to prevent memory leaks or other issues. You can return a cleanup function from the effect to perform cleanup operations. This function will be called when the component is unmounted or before running the effect again."})}),"\n",n(r.figure,{"data-rehype-pretty-code-figure":"",children:n(r.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",children:l(r.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#B392F0"},children:"useEffect"}),n(r.span,{style:{color:"#E1E4E8"},children:"(() "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:" // Effect code here"})}),"\n",n(r.span,{"data-line":"",children:" "}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:" // Cleanup function"})}),"\n",l(r.span,{"data-line":"",children:[n(r.span,{style:{color:"#F97583"},children:" return"}),n(r.span,{style:{color:"#E1E4E8"},children:" () "}),n(r.span,{style:{color:"#F97583"},children:"=>"}),n(r.span,{style:{color:"#E1E4E8"},children:" {"})]}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#6A737D"},children:" // Cleanup code here"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:" };"})}),"\n",n(r.span,{"data-line":"",children:n(r.span,{style:{color:"#E1E4E8"},children:"}, []);"})})]})})}),"\n",n(t,{children:n(r.p,{children:"In this example, the cleanup function returned from the effect will be called when the component is unmounted."})}),"\n",n(o,{children:"Conclusion"}),"\n",n(t,{children:l(r.p,{children:["The ",n(r.code,{children:"useEffect"})," Hook is a powerful tool for managing side effects in React functional components. It allows you to perform actions after the component has been rendered, such as data fetching, subscriptions, or DOM manipulation. By understanding how to use ",n(r.code,{children:"useEffect"})," and its dependencies, you can create more dynamic and interactive React applications."]})}),"\n",n(t,{children:l(r.p,{children:["In this tutorial, we covered the basic usage of the ",n(r.code,{children:"useEffect"})," Hook and explored how to specify dependencies and cleanup functions. Experiment with ",n(r.code,{children:"useEffect"})," in your own projects to unlock its full potential!"]})}),"\n",n(r.p,{children:"Stay tuned for more React Hooks tutorials and happy coding!"})]})}return{default:function(e={}){const{wrapper:l}=e.components||{};return l?n(l,{...e,children:n(_createMdxContent,{...e})}):_createMdxContent(e)}};function _missingMdxReference(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}