How does the component lifecycle work in React and what are the key points to consider at each stage?

26 Tem 13:20

In React, a component goes through three main phases—mount, update, and unmount. For functional components, the equivalent of `componentDidMount` is `useEffect(() => { … }, [])`: the code inside runs once after the initial render, and the returned cleanup function executes during unmount (like `componentWillUnmount`). For updates, effects with dependencies in the dependency array trigger when the specified props/state change—similar to `componentDidUpdate` and `shouldComponentUpdate` in class components. To prevent unnecessary renders, developers typically use `React.memo` (or `PureComponent` in classes) and memoize computations with `useMemo`/`useCallback`. Compared to Vue (where the lifecycle is split into `created`, `mounted`, `updated`, and `destroyed`), React hooks offer finer granularity—each `useEffect` can have its own dependency array, and cleanup runs right before the next effect call or during unmount. When using `useEffect`, it’s crucial to include all external variables in the dependency array; otherwise, you risk a "stale" context. The cleanup function triggers either when any dependency changes or when the component unmounts. Key optimization spots include minimizing state, avoiding heavy computations in the render body, using `React.lazy`/`Suspense` for dynamic imports, and profiling the app regularly (Profiler, `why-did-you-render`). These practices help drastically reduce unnecessary re-renders and improve UI responsiveness.