How to initialize the react functional component state from props

Question

I'm using React hooks for app state, I wondered about how to initialize the functional component state using props? The useState hook doc says something definitive like,

const [count, setCount] = useState(0);

I want to initialize that 0 value by the value of props being passed to the component. The Older as,

import React from 'react';

export default class Sym extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            sym : [0,3,2,8,5,4,1,6],
            active: this.props.activeSym
        }
        this.setActive = this.setActive.bind(this);
    }

    setActive(itemIndex){
        this.setState({
            active: itemIndex
        });
    }

    render(){
        return (
             <div><h1>{ this.state.sym[this.state.active]}</h1></div>
        );
    }
}

works fine. Where the parent Component passes activeSym prop and Sym component initializes the state with it using this.props.activeSym in constructor. Is there any workaround to achieve same in function component?

Answer 1

First you can define it from props (if the prop exist):

const [count, setCount] = useState(activeSym);

And then you can update this value, when prop doesn't have a value immediately (when component rendered):

useEffect(() => {
  if (activeSym) {
    setCount(activeSym);
  }
}, [activeSym])

Answer 2

Yes, this can be possible with functional component too! You just need to add useEffect to listen to prop change for initializing state with prop value

export const newComponent = (props) => {
  const { path, value, info, update } = props;
  const [val, setVal] = useState(value);

  useEffect(() => {
    setVal(value);
  }, [value]);

  return <div>{val}</div>;
};

Attching sandbox link

https://codesandbox.io/s/confident-agnesi-ohkq7?file=/src/MakeComponent.js

Answer 3

Just as follows :

const MyFunctionalComponent = ({myProp}) => {
  const [count, setCount] = useState(myProp)

  return (
     /* ... */
  )
}