Most performant way to structure a React app with a multiple step, very JS heavy "wizard"?

I am building a create-react-app website that has a multiple step "wizard" form for the user to fill out. The wizard has 8 steps. Each 1 of those 8 steps has very heavy javascript (cascading tree pickers with tens of thousands of rows).

Currently I am rendering/showing all 8 steps on one page:
/app/wizard (react-router-dom)

so that it is a very long form that the user can scroll through vertically.

The page is starting to become a bit sketchy/ struggling/ laggy to perform dom updates, and i am thinking it is because I have too many heavy components mounted.

I am brain storming new ways to structure this wizard to decrease the strain on the browser and therefore increase performance.

The method that I am inclined to take is to make each step / section a separate page / react-router-dom route. I am inclined to try this solution because it would have less Javascript mounted at any given time; and I believe the less you have mounted, the less the browser has to work.

Am I understanding react and mounted correctly? Because each step is its own separate functional component, could i theoretically have thousands of heavy javascript components loaded on the same page /route without affecting performance?

Thank you for reading.

Source: Ask Javascript Questions

LEAVE A COMMENT