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

Question

I am trying to set the state using React hook setState() using the props the component receive. I\'ve tried using the below code:

import React,{useState , us         


        

Answer 1

This general idea can be put into hook:

export function useStateFromProp(initialValue) {
  const [value, setValue] = useState(initialValue);

  useEffect(() => setValue(initialValue), [initialValue]);

  return [value, setValue];
}


function MyComponent({ value: initialValue }) {
  const [value, setValue] = useStateFromProp(initialValue);

  return (...);
}