Preserve the state of invisible/unrendered components

[eggerand13]

Hello and thank you very much for creating this interesting piece of software.
I have a question regarding the usage of react-wizard-primitive.

Like in other wizards I would like to preserve the state of the components/steps that are currently not visible so that:

1. The user can later go back to other steps and change the input
2. I can access the states of all previous components in a final step (e.g. to send a form)

However I noticed when trying out your example that the state will be reset whenever I go back to a previous component. To try this out I forked that example and added a state to the TextFields component.
https://codesandbox.io/s/wizard-custom-abstraction-forked-5wr9c

I might have a big misconception here but I expected the wizard to never actually unrender the various steps but just make them "invisible" so that the components would keep their state (like https://github.com/newbreedofgeek/react-stepzilla does it as far as I understand).

Or would it be necessary for me manage all the states of the steps in the parent (Wizard) component?
If this was the case how would you go about creating a custom wizard (like in your example https://codesandbox.io/s/wwo9x7p1k) that is generic so that it would accept any components as children?
Because managing the state would imply knowing what states the components require.

Thank you very much in advance and please let me know if you need any other information for further clarification.

[Jibbedi]

Hi,

thanks a lot for your thoughtful comment. I really appreciate the effort you put into this :-)

The main idea about this library is that it will manage the state of the wizard and let the user decide anything else like how the form state is stored or how components are rendered.

For the example you've mentioned, I made the decision that only the active component should be mounted.

Now there lies the problem for you. Every time a component is unmounted (i.e. is not the currently active step) it loses its state.

Knowing this will leave us with a couple of possible solutions.

1. Don't unmount the components when they're not visible but hide them using CSS.
   https://codesandbox.io/s/wizard-custom-abstraction-forked-3rt3u

This will keep the state around but it will still be hard to get the complete state in the final step.

2. What we can do instead is lifting the state up, as you've already pointed out :-)
   https://codesandbox.io/s/wizard-custom-abstraction-forked-9bm1f

In this example, I'm storing the state inside of the Custom Wizard Component and pass a helper to set and read the state for a form field via context.
But you can do this basically any way you want. If your form is fairly complex you might consider a form library like Formik that works in perfect harmony with react-wizard-primitive :-)

Let me know if you need help setting this up, I'm happy to help :-)

[eggerand13]

Thank you very much for your thorough response and also the provided examples. I am sure that they will guide other people who are researching similar questions in the future.

Unfortunately I was already under a little time pressure. Therefore I searched for other possible solutions and finally decided to use this package https://www.npmjs.com/package/react-step-wizard. It is also rather unopinionated but has the advantage (if you consider it an advantage) that the components are not unmounted and I don't have to personally care about unmounting/mounting them.

The reason being is that I have some rather complex controlled components (not just simple forms) as my wizard steps and it would have been a lot of work (and maybe cause performance issues) to rework them so that the wizard completely manages their state.

Thank you anyway. You answered my question. I'll just leave this issue open in case you want to add anything more.

[Jibbedi]

Sure :-) Glad you found a solution that works for you.
All the best! :-)