How to sync props to state using React hooks : setState()

by

useState hooks function argument is being used only once and not everytime the prop changes. You must make use of useEffect hooks to implement what you would call the componentWillReceiveProps/getDerivedStateFromProps functionality

import React,{useState , useEffect} from 'react';

const Persons = (props) =>  {
   const [nameState , setNameState] = useState(props)

   useEffect(() => {
       setNameState(props);
   }, [props])

   return (
            <div>
                <p>My name is {props.name} and my age is {props.age}</p>
                <p>My profession is {props.profession}</p>
            </div>
        )

}

export default Persons;

More Related Contents:

  1. Infinite loop in useEffect
  2. How to use `setState` callback on react hooks
  3. React-hooks. Can’t perform a React state update on an unmounted component
  4. In useEffect, what’s the difference between providing no dependency array and an empty one?
  5. React useState cause double rendering
  6. React Hook : Send data from child to parent component
  7. React useReducer async data fetch
  8. Line 0: Parsing error: Cannot read property ‘map’ of undefined
  9. In general is it better to use one or many useEffect hooks in a single component? [closed]
  10. React hooks useEffect only on update?
  11. Stop useEffect from running on mount
  12. useNavigate() may be used only in the context of a component
  13. Testing React components that fetches data using Hooks
  14. Why React useState with functional update form is needed?
  15. React.useState does not reload state from props
  16. React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function
  17. How do react hooks determine the component that they are for?
  18. React Hooks: how to wait for the data to be fetched before rendering
  19. useReducer Action dispatched twice
  20. Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’
  21. is it possible to React.useState(() => {}) in React?
  22. React Hooks – How do I implement shouldComponentUpdate?
  23. React hook rendering an extra time
  24. Field Array in React using formik
  25. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  26. How to create dynamic refs in functional component- Using useRef Hook
  27. Put A Warning If Page Refresh in ReactJS
  28. Passing array to useEffect dependency list
  29. How do I window removeEventListener using React useEffect
  30. React Hook useEffect has a missing dependency: ‘list’

Leave a Comment