The reactNode is stored in the store, sometimes causing the component to lose update

[vaynevayne]

Summary

As shown in the figure, when I put the children into sotre, there seems to be a problem with the childen taken out, and I cannot use it under control.

I have three questions

1. Items do not pass in pageProvider, but directly pass in tabs, then both switches work normally. Is this a zustand problem?

Link to reproduction

https://stackblitz.com/edit/react-r32udm-pvtuoe?file=PageLayout.tsx

Check List

Please do not ask questions in issues.

• I've already opened a discussion before opening this issue, or already discussed in other media.

Please include a minimal reproduction.

• I've added a link to a typescript playground or codesandbox with a minimal reproduction.

Please check this if you're filing an issue regarding TypeScript.

• I've read the typescript guide, in particular that create is to be used as create<T>()(...) and not create<T>(...).

[dai-shi]

I'm not sure if I get the point. Can anyone help?
A much smaller reproduction might help.

[vaynevayne]

@dai-shi
The short description is that, at this time, it is not supported to store reactNode in the store.

// I have a reactNode
const Input = ({value, onChange}) =>  <input value={value} onChange ={onChange}/>

// Store it in the store
const useStore = create()({
reactNode:  Input
})




const Page =()=>{
// take sth. out of the store
const MyInput = useStore((state)=> state.reactNode)

const [value,onChange] = useState('')

// Changes the value, but the component is not updated
useEffect(()=> {
setTimeout(()=> {
onChange('212121')
},2000)
},[])

 //  I can't use it in a controlled manner.
return <MyInput value={value} onChange={onChange} />
}

[dai-shi]

Input isn't a React node. It's a function to return a React node, which is a component.
It's not recommended to store a component function in Zustand or any store/variables.

That said, your code should work with some fixes:
https://codesandbox.io/s/epic-brahmagupta-2wshjl?file=/src/App.js

[vaynevayne]

I got it. In fact, I store children, which should belong to reactNode. Can ReactNode also be stored?

You can look at my example

https://stackblitz.com/edit/react-r32udm-pvtuoe?file=PageLayout.tsx

[dai-shi]

Yes, storing React nodes is fine.

[vaynevayne]

But in my case, it doesn't work, the switch component doesn't work, can you help me?
https://stackblitz.com/edit/react-r32udm-pvtuoe?file=CrudPage.tsx

[vaynevayne]

@dai-shi Can you take a look?

[dai-shi]

Can you reproduce the bug without Switch and other libraries?

[vaynevayne]

done https://stackblitz.com/edit/react-r32udm-pvtuoe?file=Button.tsx

[dai-shi]

It's still too big, but let me see.
Yeah, that's how it works. Because you cache the node and don't replace on re-render, it always shows the node from the first render.
https://stackblitz.com/edit/react-r32udm-axs5qg

[vaynevayne]

thanks, Hopefully, this code can be updated to the documentation to avoid others stepping on the pit