re-render a functional component on prop change

Question

Child component accepts a prop and does calculations to show value. On first load, it does work but when parent does passes new value, nothing updates.

Parent:

 function Parent(){
       const [v, setV] = useState(0);

    const addNewValue = () =>{
        setV(generateValue({type:'mv', gId: 3})); // generateValue is a function that returns an integer on each call
      }

   return (<div>
          <Child value={v}/>
          <Button onClick={addNewValue}>Calculate</Button>
          
       </div>)

  }

Child.js

 function Child({value}){
       const [baseValue, setBaseValue] = useState(value);


    useEffect(()=>{
      const calculate = calculate(baseValue);
      setBaseValue(calculate);
     },[baseValue]);

   return (<div>
          <Text>{baseValue}</Text>
       </div>)

  }

Possible duplicate of https://stackoverflow.com/questions/46240647/react-how-to-force-a-function-component-to-render — Arvind Maurya, Nov 09 '21 at 14:17
@ArvindMaurya They don't need to force a re-render. A prop change will automatically trigger a re-render, so if they aren't getting that behavior, they're most likely breaking the rules of React. However, I believe *they are* getting a re-render; it's just not doing what they expect. — Brian Thompson, Nov 09 '21 at 14:20

Brian Thompson · Answer 1 · 2021-11-09T14:29:55.013

The parameter passed to useState only gets used once on the first render, so you will never see any changes due to value updating. However, the Child component is still re-rendering

Your useEffect should just depend on value, since that's what it actually needs to operate on. Otherwise, you'll end up with an infinite loop since every time baseValue changes you're updating it again.

useEffect(()=>{
  const calculate = calculate(value);
  setBaseValue(calculate);
},[value]);

Also note that storing values from props in state is usually an anti-pattern.

The React docs provide a very helpful checklist of what should not be in state.

Is it passed in from a parent via props? If so, it probably isn’t state:

Does it remain unchanged over time? If so, it probably isn’t state.

Can you compute it based on any other state or props in your component? If so, it isn’t state.

This may fall into #3 (without knowing your full use-case I can't say for sure). In which case you should not use local state in the child at all. If this is true, you should call calculate directly each render, or use memoization if the calculation is intensive.

score 0 · Answer 2 · answered Nov 09 '21 at 14:15

The thing is your effect does not trigger because baseValue is not changing in a mounted component. The first time it does. You need to update your effect to this:

useEffect(()=>{
      const calculate = calculate(value);
      setBaseValue(calculate);
     },[value]);

score 0 · Answer 3 · answered Nov 09 '21 at 14:21

Passing value props to useState will only change baseValue in the mounting phase. It won't cause a change in a future update of the value prop

If you want to somehow do the calculation optimally you can memorize the calculated value, otherwise, it seems that removing the state and using props will do the job. take a look Uncontrolled component

 function Child({value}){

   const baseValue = useMemo(() => calculate(baseValue), [value])
   
   return (<div>
          <Text>{baseValue}</Text>
       </div>)
  }

re-render a functional component on prop change

3 Answers3