In React, class components use lifecycle methods to manage component behavior throughout its lifecycle. When using functional components with React Hooks, you can achieve similar functionality by using various hooks. Here's a breakdown of the equivalent hooks for common class component lifecycle methods along with examples.
1. componentDidMount Equivalent
In class components, componentDidMount is used for actions that need to be performed after the component is mounted in the DOM. In functional components, you can achieve this using the useEffect hook with an empty dependency array ([]).
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
// Your code here
console.log('Component is mounted');
// Don't forget to clean up
return () => {
console.log('Component will unmount');
};
}, []); // Empty dependency array for componentDidMount
return <div>My Component</div>;
}
2. componentDidUpdate Equivalent
For operations that need to be performed after the component updates, you can use useEffect with dependencies.
import React, { useEffect, useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
// Your code here
console.log('Component did update');
// Don't forget to clean up
return () => {
console.log('Component will unmount');
};
}, [count]); // Dependency array with the state variable
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
In this example, the useEffect hook is triggered whenever the count state variable changes.
3. componentWillUnmount Equivalent
To perform cleanup when a component is about to unmount, you can return a cleanup function from useEffect.
import React, { useEffect, useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
// Your code here
// Cleanup function
return () => {
console.log('Component will unmount');
};
}, []); // Empty dependency array for componentDidMount and componentWillUnmount
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
Here, the cleanup function is called when the component unmounts.
4. shouldComponentUpdate Equivalent
In class components, shouldComponentUpdate allows you to control whether a component should re-render. In functional components, you can use the React.memo higher-order component or the useMemo hook for memoization.
import React, { useMemo } from 'react';
type Props = {
value: number;
};
const MemoizedComponent = React.memo(({ value }: Props) => {
// Your component code here
return <div>Value: {value}</div>;
});
function ParentComponent() {
const memoizedComponent = useMemo(() => <MemoizedComponent value={5} />, []);
return (
<div>
{memoizedComponent}
<button onClick={() => console.log('Parent component updated')}>Update Parent</button>
</div>
);
}
In this example, the MemoizedComponent is memoized using React.memo, and it will only re-render if its props change.
These examples demonstrate how to achieve the equivalent behavior of class component lifecycle methods in functional components using React Hooks. React Hooks provide a more concise and expressive way to manage component behavior and state.
Top comments (0)