父类状态改变时如何重新加载子组件

Question

in Parent class, I pass the item to child component.

<InfoWidget bar={this.state.bar}> 
</InfoWidget>

then,receive data and use prop.bar here

const InfoWidget = (props) =>{
  const [length, setLength] = useState([]);
  const classes = useStyles();
  useEffect(() => {
 
    setLength( props.bar * 10);
  }, []);
  return(
    <Paper> 
     {length}
    </Paper>
  );
}

First load it works well, but when the state.bar of parent class changed, child component is not reloaded.

I want to reload the child component ,every time the value of parent class changed.

Where should I change?

Answer 1

Add it as a dependency:

useEffect(() => {
  setLength(props.bar * 10);
}, [props.bar]);

Answer 2

Add key to parent, when the key changes it will rerender the component

<InfoWidget key={this.state.bar} bar={this.state.bar}> 
</InfoWidget>