Menu

gitpiper

useComponentDidUpdate react Code Snippet in 2024

hookseffectbeginner

Last Updated: 1 December 2024

Executes a callback immediately after a component is updated.

  • Use the useRef() hook to create a variable, mounted, that tracks if the component has been mounted.
  • Use the useEffect() hook to set the value of mounted to true the first time the hook is executed.
  • Run the provided callback on subsequent hook executions.
  • Providing a dependency array for the second argument, condition, will only execute the hook if any of the dependencies change.
  • Behaves like the componentDidUpdate() lifecycle method of class components.
const useComponentDidUpdate = (callback, condition) => { const mounted = React.useRef(false); React.useEffect(() => { if (mounted.current) callback(); else mounted.current = true; }, condition); };
const App = () => { const [value, setValue] = React.useState(0); const [otherValue, setOtherValue] = React.useState(1); useComponentDidUpdate(() => { console.log(`Current value is ${value}.`); }, [value]); return ( <> <p> Value: {value}, other value: {otherValue} </p> <button onClick={() => setValue(value + 1)}>Increment value</button> <button onClick={() => setOtherValue(otherValue + 1)}> Increment other value </button> </> ); }; ReactDOM.render(<App />, document.getElementById('root'));

react snippet similar to useComponentDidUpdate For You in December 2024

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2024 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️