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 }} />

Email

<SidebarItem
type="bell"
ports={{
port1: {
id: 'port1',
type: 'bottom',
properties: {
custom: 'property',
},
},
}}
>
<Bell style={{ width: 60, height: 60 }} />

Notification

.
.
.
.
.
.
.>>>>>>>>
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.