Do not re-render children on closed Collapsible

[Jakub Zawiślak]

I had a performance issue while using multiple Collapsibles, because the closed ones were re-rendering unnecessarily.

I have a form that consists multiple Collapsibles, like this:

<Formik>
  {({ values }) => (
    <Form>
      <Collapsible open={open == 'formPartA'}><FormPartA/></Collapsible>
      <Collapsible open={open == 'formPartB'}><FormPartB/></Collapsible>
      <Collapsible open={open == 'formPartC'}><FormPartC/></Collapsible>
      ...
    </Form>
  )}
</Formik>

When I change something in one part of my form, then values is changing and all of the FormPartX want to re-render, even if they are closed. It's a performance issue when the form is complex.

We need functionality that will block passing children when the Collapsible is closed.

I have fixed this by writing this code:

const Card = ({ children, isOpen, /* ... */ }) => {
  // ...

  const [isClosing, setIsClosing] = useState(false)

  useEffect(() => {
    if (isOpen) {
      setIsClosing(true)
    }
  }, [isOpen])

  return (
    <Collapsible
      open={isOpen}
      onClose={() => setIsClosing(false)}
      /* ... */
    >
      {(isOpen || isClosing) && children}
    </Collapsible>
  )
}