Splitter state is not saved in StrictMode

[cfblaeb]

Describe the bug

Splitter sometimes overwrites local storage data.
If using <React.StrictMode> the data gets reset on refresh.
If removing StrictMode, then it works as intended.

Reproducer

https://codesandbox.io/s/primereact-test-forked-p647y5?file=/src/index.js

PrimeReact version

8.6.1

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

As shown in the codesandbox, if you use StrictMode then stored data gets overwritten on refresh.
If you remove the StrictMode tags, then you can refresh and it correctly remembers you data.

Expected behavior

Don't overwrite data regardless of whether or not StrictMode is used.

[melloware]

I can take a look at this. Thanks for the detailed report!

[kalinkrustev]

I do not think it is related only to StrictMode. It is always overwritten on rerender.

Open the reproducer URL and then the Developer Tools.
Resize the splitter and observe the local storage is updated with the new size of the panels.
Click the button and the local storage will be overwritten with [50, 50].

I was going to propose an alternative fix, which I think avoids calling restoreState on each render.

            if (props.children && props.children.length) {
                let initialized = isStateful && panelSizes.current; // this line is changed

                if (isStateful && !mounted.current) {
                    initialized = restoreState();
                }

[melloware]

@kalinkrustev sure thing please submit the PR.

[kalinkrustev]

Sorry, I did not notice the switch from React.useEffect to useMountEffect, so probably there is not restoreState on each render.

Still I think a better fix is to restoreState() when one of the properties stateKey or stateStorage has changed, instead of doing this only once after mount.

See #3482. I have not tested it yet, but it should work better than the original fix and I think it is a simpler approach.

[melloware]

Looks good there is one build error but let me know how your testing goes.