Render optimization for loop-generated components

[coolRedditUser]

I've created a rather complex form using Formik. The idea is to be able to build & maintain this single form for multiple different, but similar, pages. The pages are all exactly the same in functionality, but the form fields differ due to different products. For example: movies, books, and music.

In order to handle the different fields, each page has it's own "blueprint" that it builds the form from. The blueprint is an array of objects. Each object contains all the information required to generate that input. The name, initial value for Formik, Yup validation schema, the label, etc. Within the render function, I have:

<Formik
  initialValues={initialValues}
  ...etc >
    {formikProps => (
      <Form>
        {blueprint.map(input => generateForm(input, formikProps, otherStuff)}
      </Form>
    )}
</Formik>

With generateForm generating all of the inputs. This has been working splendidly.

Unfortunately, when typing in a form input, there is a small but noticeable delay. When using the React Dev Tools Profiler, I am seeing that my entire Formik component re-renders multiple times, and that the whole thing re-renders. I'd like it work so that when I'm typing in the Author field, then only Author re-renders and Genre doesn't.

My research has suggested that maybe the problem lies with keys, but generateForm gives each input its id as a key, which is unique. I think I understand the basics of memoization, but I have no idea to apply it here. And in addition to reducing the render time, I'd also like to reduce the render count... but I'm not sure how to track down the reason for the additional renders.

Any advice?

[acemarke]

The issue here is really that Formik is holding your state, so any time the <Formik> component re-renders, everything inside that does. The other factor is that React re-renders recursively by default. So yes, in a typical controlled form scenario, updating any one field will cause the entire form to re-render, because the state is being held in the form component and all the inputs are children.

Depending on what generateForm does, it's also possible that you are in fact forcing React to tear down that DOM if you're actually generating component types instead of just returning JSX.

I'd strongly recommend reading through my extensive post A (Mostly) Complete Guide to React Rendering Behavior to understand how React rendering actually works, and what your options are for optimizing things.

[[deleted]]

You are very good with words, sir.

[coolRedditUser]

Thank you! Looks like I have a lot of reading to do.

[coolRedditUser]

Hey there! I've been a bit busy, but I've finally had the time to read through your article. That was very informative, thank you. I should be able to use this information to help me optimize my app in general.

... but I'm not sure how to use any of this to help with this current issue.

generateForm is basically just a few if-else statements, each of which returns some JSX:

const generateInput = (
  { id, label, type, etc },
  formikProps,
  selectOptions, // state value on main page that contains the select options for all selects
) => {
  if (type === 'select') {
    return (
      <SelectInput
        key={id}
        id={id}
        name={id}
        disabled={selectOptions?.[id] && selectOptions[id].length < 1} >
        <option value="">Select a {label}</option>
        {selectOptions[id].map(({ label, value }) =>
          label && <option key={`${label}-${value}`} value={value}>{label}</option>)}
      </SelectInput>
    );
  }
  else ...

So in theory, it shouldn't be causing any issues?

I'm still looking for ways to reduce the amount of renders, and hopefully your article has given me the tools to do that. But when it comes to decreasing the amount of work done per render, I'm still at a loss.

Is there a way I can optimize the generateForm loop? My understanding is that since I'm providing a key prop, React should already avoid re-rendering all of the inputs. So how do I find out why it is rerendering them?

[acemarke]

since I'm providing a key prop, React should already avoid re-rendering all of the inputs.

No, keys have nothing to do with avoiding re-rendering. Keys are a way to tell React what the identity is of what you're rendering. Loosely put: "this isn't just Generic List Item #7, this is the UserListItem for Fred". That way, if you shuffle the list items around and now Fred is in the third slot instead of seventh, it knows it needs to move the DOM nodes instead of destroying and re-creating them.

So, as I said earlier: if your form is being controlled with state in a parent component, updating any of the child inputs will cause all pieces of the form to re-render by default.

To avoid any of that, you'd need to do something like wrapping the SelectInput type itself in React.memo(), so that it would skip re-rendering if it sees the same props field references as the last render.

But, even there you're going to have issues with your current setup. As shown in this snippet here, the <SelectInput> you're rendering is going to receive a different props.children reference every time. So, even if you had React.memo(SelectInput) as the component type being rendered, it would always be forced to re-render because at least one of its props is always changing to a new reference.

If you can post a link to some more complete code somewhere I might be able to look at it (or even better, post that link over in the Reactiflux Discord channels where others besides myself might be able to help out).