Can getDerivedStateFromProps be used as an alternative to componentWillReceiveProps

by

getDerivedStateFromProps is not just a name change to componentWillReceiveProps. It’s a static method that is called after a component is instantiated or before it receives new props, unlike componentWillReceiveProps which was not called on initial render.

Return an object to update state in response to prop changes.

Return null to indicate no change to state.

Static lifecycle methods are introduced to prevent unsafe access of instance properties.

The purpose of getDerivedStateFromProps is to only update the state based on props change and not take actions like API call or function call based on prevProps that could be done. All of these could be done in the componentDidUpdate lifecycle function which is safe because even if the change was done in componentWillReceiveProps the data would arrive after render and most often you would trigger another re-render, which could well be done in the componentDidUpdate lifecycle method.

You can refer to this RFC to understand more about why this change was made.

More Related Contents:

  1. Error : Cannot read property ‘map’ of undefined
  2. How do I hide API key in create-react-app?
  3. react router difference between component and render
  4. How to resolve “Cannot use import statement outside a module” in jest
  5. Hide keyboard in react-native
  6. Property ‘value’ does not exist on type ‘Readonly’
  7. ReactJS – Add custom event listener to component
  8. React app exiting in docker container with exit code 0
  9. React useReducer async data fetch
  10. Import image dynamically in React component
  11. Testing React components that fetches data using Hooks
  12. Value of “this” is incorrect when debugging Babel transpiled React with Chrome Devtools
  13. Trace why a React component is re-rendering
  14. Using `”homepage”` in package.json, without messing up paths for localhost
  15. Performing Authentication on Routes with react-router-v4
  16. Conditionally set background color in React component with Tailwind CSS
  17. How do react hooks determine the component that they are for?
  18. useReducer Action dispatched twice
  19. React router 4 does not update view on link, but does on refresh
  20. Difference between @mui/material/styles and @mui/styles?
  21. React: Hide a Component on a specific Route
  22. React hook rendering an extra time
  23. How to enable file upload on React’s Material UI simple input?
  24. Create-React-App build – “Uncaught SyntaxError: Unexpected token
  25. ESLint Must use destructuring state assignment
  26. How to test Async Storage with Jest?
  27. Children won’t render when using a layout in ReactJS
  28. create react app not picking up .env files?
  29. React Hook useEffect has a missing dependency: ‘list’
  30. Show/Hide components in ReactJS

Leave a Comment