forceUpdate not work in child component GuardGraph

[wowok-ai]

export default function GuardSetting (props:any) {
  const [, forceUpdate] = useReducer(x => x + 1, 0);

    return (
      <Paper sx={{ width: '100%', pt:'1em', }} >
        <SettingHeader name={'Launch Guard'}/>
        <ReactFlowProvider>
          <GuardGraph {...props} forceUpdate={forceUpdate}/>
        </ReactFlowProvider>
      </Paper>
    );
}

Is there any more elegant way to refresh GuardGraph without using window.location.reload()?
Thx.

[RioChndr]

Hi, let me help to answer this question. Force update can be done by changing the key of component/element.

const [key, setKey] = useState('first-key');
const forceUpdate = () => { setKey(crypto.randomUUID()); }
return (
<GuardGraph key={key} {...props}
)

by doing this, the component will be forced to re-render. Read more this documention about key. Hopefully this answer your question!