CODEWITHSUNDEEP
reactjs
Domino987
Domino987

Reputation: 8774

MultiStep React Form

What is the best practice to implement a multi step form? I know that there are several different practices, but which one is the best/most performant ?

  1. Redux/Global state management: Easiest but bad for performance, because it will check every connected component on every key hit.
  2. Raised State: Have a parent component keeping all state, but this couples the components too close together and makes the parent component too complex
  3. Render props: The child components render the next button of the form as a render prop and push their data to the parent on next click => this makes the parent complex as well and it may be difficult to pass the data to the parent.

What are your thoughts? Thanks in advance!!

Upvotes: 1

Views: 209

Answers (1)

div
div

Reputation: 925

I would go for the second option, because it keeps the children simple and dumb (MVC). The parent component keeps track of all data and which form is currently displayed, which keeps all logic within one component (which makes it easy to update). Performance won't be a problem, because it only displays one form anyway, so the performance is the same as if using a single form.

Upvotes: 2

Related Questions