Sí, se puede inicializar el estado con el valor de una prop. Pero hay que tener en cuenta que, si la prop cambia, el estado no se actualizará automáticamente. Esto es porque el estado se inicializa una vez, cuando el componente se monta por primera vez.

Por ejemplo, con componentes funcionales:

const Counter = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <Count count={count} />
      <button onClick={() => setCount(count + 1)}>Aumentar</button>
    </div>
  )
}

const Count = ({ count }) => {
  const [number, setNumber] = useState(count)

  return <p>{number}</p>
}

En este caso, el componente Count inicializa su estado con el valor de la prop count. Pero si cambia el valor de la prop count, el estado no se actualizará automáticamente. Por lo que al hacer click, siempre veremos el número 0 en pantalla.

• Código de ejemplo

En este ejemplo, lo mejor sería simplemente usar la prop count en el componente Count y así siempre se volvería a renderizar.

Es una buena práctica evitar al máximo los estados de nuestros componentes y, siempre que se pueda, simplemente calcular el valor a mostrar a partir de las props.

En el caso que necesites inicializar un estado con una prop, es una buena práctica es añadir el prefijo de initial a la prop para indicar que es el valor inicial del estado y que luego no lo usaremos más:

const Input = ({ initialValue }) => {
  const [value, setValue] = useState(initialValue)

  return (
    <input
      value={value}
      onChange={e => setValue(e.target.value)}
    />
  )
}

Es un error muy común pensar que la prop actualizará el estado, así que tenlo en cuenta.