Black BeltuseeffectlockPREMIUM

State-from-Props Without useEffect - Derive Inline or Reset With Key

A component receives an initialValue prop and wants its local state to update whenever that prop changes, and a developer reaches for useEffect to synchronize the two.

REACT_MODULE // 0x42

function Field({ initialValue }) {
const [value, setValue] = useState(initialValue);
useEffect(() => {
setValue(initialValue);
}, [initialValue]);
return <input value={value} onChange={e => setValue(e.target.value)} />;
}

What are the two correct alternatives to this useEffect synchronization pattern, and why is useEffect the wrong tool here?

lock

This Drill is Locked

This is a premium drill. Continue on to the next free drill in the sequence.

CONTINUE DRILLarrow_forward