In React, you can represent the call lifecycle methods using the following hooks:
useEffect()
: This hook can be used to represent thecomponentDidMount()
,componentDidUpdate()
, andcomponentWillUnmount()
methods. You can pass a function touseEffect()
as its first argument, which will be executed after every render cycle. You can also pass a second argument touseEffect()
, which is an array of dependencies that, when changed, will trigger the function to be re-executed.useLayoutEffect()
: This hook is similar touseEffect()
, but it runs synchronously after all DOM mutations are applied. It can be used to represent thecomponentDidMount()
andcomponentDidUpdate()
methods, but notcomponentWillUnmount()
.useMemo()
: This hook can be used to represent theshouldComponentUpdate()
method. You can pass a function and an array of dependencies touseMemo()
, and it will only recompute the value of the function when the dependencies change.useCallback()
: This hook is similar touseMemo()
, but it returns a memoized callback function instead of a memoized value. It can be used to represent event handlers that are passed down to child components.useRef()
: This hook can be used to represent thecomponentDidMount()
andcomponentDidUpdate()
methods. You can create a ref usinguseRef()
and assign it to an element in your component’s render method. The ref will persist across re-renders and can be used to access the element’s properties and methods.
import React, { useState, useEffect, useLayoutEffect, useMemo, useCallback, useRef } from 'react'; function MyComponent(props) { const [count, setCount] = useState(0); const myRef = useRef(null); const inputRef = useRef(null); // componentDidMount and componentDidUpdate useEffect(() => { console.log('Component has mounted or updated'); console.log('useEffect: componentDidMount or componentDidUpdate'); return () => { console.log('Component will unmount'); console.log('useEffect: componentWillUnmount'); }; }, [count]); // componentDidMount only useLayoutEffect(() => { console.log('Component has mounted'); console.log('useLayoutEffect: componentDidMount only'); }, []); // shouldComponentUpdate const expensiveCalculation = useMemo(() => { console.log('Expensive calculation'); return count * 2; }, [count]); // componentWillUnmount useEffect(() => { return () => { console.log('useEffect: componentWillUnmount'); }; }, []); // event handler const handleClick = useCallback(() => { console.log('Button clicked'); setCount(count + 1); }, [count]); // memoized value const memoizedValue = useMemo(() => { console.log('useMemo: computing memoized value'); return count * 2; }, [count]); // memoized callback const memoizedCallback = useCallback(() => { console.log('useCallback: memoized callback invoked'); }, []); // focus input on mount useEffect(() => { inputRef.current.focus(); }, []); // render return ( <div ref={myRef}> <p>Count: {count}</p> <p>Expensive Calculation: {expensiveCalculation}</p> <button onClick={handleClick}>Increment</button> <p>Memoized Value: {memoizedValue}</p> <input type="text" value={text} onChange={(e) => setText(e.target.value)} ref={inputRef} /> <button onClick={memoizedCallback}>Invoke Memoized Callback</button> </div> ); } export default MyComponent;
In this example, we’re using:
useState
to manage state in our component.useEffect
to representcomponentDidMount
andcomponentDidUpdate
.useLayoutEffect
to representcomponentDidMount
only.useMemo
to memoize a computed value.useCallback
to memoize a callback function.useRef
to get a reference to adiv
element.
In the useEffect
hook, we’re logging into the console to show when the component mounts, updates, and unmounts. We’re also returning a function that will be called when the component is unmounting.
In the useLayoutEffect
hook, we’re logging into the console to show when the component mounts.
In the useMemo
hook, we’re computing a memoized value based on the count
state variable. This is similar to shouldComponentUpdate
because we’re only re-computing the expensive calculation when count
changes.
In the useCallback
hook, we’re creating a memoized callback function that logs to the console when it’s invoked. This is similar to shouldComponentUpdate
because we’re only creating a new function when count
changes.
Finally, in the useRef
hook, we’re getting a reference to a div
and Input
element.