Functional components are having rendering issue.

[anilkaliya]

I m tryng this library with functional components. so i am facing the issue something like : i m draging the element and element is not showing on screen immediately. after hovering on other node i can see the dragged element. i think it has some issue with state after draging its not updating the state immediately. My code is something like this::

export function ReactFlowChart() { const chartClone = cloneDeep(chartSimple); const [state, setState] = useState(chartClone); const stateActions = mapValues(actions, (func: any) => (...args: any) => { setState(func(...args)); }) as type of actions return( <SidebarItem type="email" id="id-1" ports={{ port1: { id: 'port1', type: 'top', properties: { custom: 'property', }, }, port2: { id: 'port1', type: 'bottom', properties: { custom: 'property', }, }, }} properties={{ custom: 'property', inputField: 'name', }} > <EmailIcon style={{ width: 60, height: 60 }} /> <Spacer mb={2} /> <Box fontSize={1}>Email</Box> </SidebarItem> <SidebarItem type="bell" ports={{ port1: { id: 'port1', type: 'bottom', properties: { custom: 'property', }, }, }} > <Bell style={{ width: 60, height: 60 }} /> <Spacer mb={2} /> <Box fontSize={1}>Notification</Box> </SidebarItem> . . . . . . .>>>>>>>> can anyone help with this issue

[DavidSolerMarco]

same issue here, any thoughts?

[peeke]

I've found a workaround:

const stateActions = React.useMemo(
  () => mapValues(actions, fn =>
    (...args) => setState(s => ({ ...fn(...args)(s) }))
  ),
  []
)

The issue seems to be that fn sometimes returns the same object instance. When using React.useState, this registers as 'no change' hence there's there's no re-render.

The workaround works by create a shallow copy of the returned object, making it different.