What is useEffect and its main use cases in React, Next JS?

视频信息

答案文本 复制

视频字幕 复制

useEffect is a React Hook that lets you perform side effects in function components. Side effects are operations that affect something outside the component's scope, such as data fetching from APIs, DOM manipulation, setting up subscriptions or event listeners, and creating timers or intervals. In this example, we're using useEffect to fetch user data when the component renders or when the userId changes. The highlighted red section shows the main useEffect hook. The blue highlight shows the dependency array, which controls when the effect runs. And the green highlight shows the cleanup function, which runs before the effect re-runs or when the component unmounts. The dependency array is a crucial part of useEffect that controls when the effect runs. There are three main patterns. First, if you don't provide a dependency array, the effect runs after every render. This is useful for effects that need to sync with every update. Second, if you provide an empty array, the effect runs only once after the initial render, similar to componentDidMount in class components. The cleanup function will run when the component unmounts. Third, if you include dependencies in the array, the effect runs after the initial render and whenever any of those dependencies change. This is perfect for effects that need to respond to specific prop or state changes. Let's discuss common mistakes when using useEffect. First, missing dependencies is a frequent issue. If you use a variable inside your effect but don't include it in the dependency array, you'll get stale closures and bugs. In this example, the query parameter is used in the effect but missing from the dependencies. The fixed version correctly includes query in the dependency array. Second, including unnecessary dependencies can cause too many re-renders. Third, creating infinite loops by updating state that's included in the dependency array. In this example, we update count in the effect and also include count in dependencies, creating an infinite loop. Finally, not cleaning up subscriptions, timers, or event listeners can cause memory leaks and unexpected behavior when components unmount. When using useEffect in Next.js, there are important considerations to keep in mind. First and most importantly, useEffect only runs on the client side, not during server-side rendering. This means any code inside useEffect won't execute until the component has been hydrated in the browser. For initial data fetching that should be included in the server-rendered HTML, Next.js provides special functions like getStaticProps for Static Site Generation and getServerSideProps for Server-Side Rendering. You should use useEffect for client-only features like accessing browser APIs such as localStorage or window, setting up subscriptions, or fetching additional data after the initial page load. In this diagram, you can see the Next.js rendering flow: first, the server renders the initial HTML, then the client hydrates the page, and only after hydration does useEffect run. Let's summarize what we've learned about useEffect. First, useEffect is a React Hook that manages side effects in function components, such as data fetching, DOM manipulation, and subscriptions. Second, the dependency array is crucial as it controls when effects run and re-run. Third, there are common patterns: running an effect once on mount, running it when specific values change, and cleaning up on unmount. Fourth, in Next.js, useEffect only runs on the client side after hydration, not during server-side rendering. Finally, as a best practice, use the right data fetching method for each use case - getStaticProps or getServerSideProps for initial data, and useEffect for client-side-only features. The diagram shows the useEffect lifecycle: after a component renders, the effect runs, which may cause state changes, triggering cleanup of the previous effect before the cycle repeats with a new render.