Transition : Call as a function vs use as component

[manurana]

I am trying to understand the difference between rendering the Transition component directly, or defining it as a separate component. And then calling it as a render function.

CASE I : Take this simple code. This works as intended.

import * as React from 'react';

import { Transition } from '@headlessui/react';

export default function TestScreen() {
  const [show, setShow] = React.useState(false);

  return (
    <div>
      <button className="text-white" onClick={() => setShow(prev => !prev)}>
        Toggle!
      </button>
      <Transition
        show={show}
        enter="transition-opacity duration-700"
        enterFrom="opacity-0"
        enterTo="opacity-100"
        leave="transition-opacity duration-700"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
        //   appear
      >
        <div className="p-8 mx-auto max-w-screen-xl bg-red-400">Hello</div>
      </Transition>
    </div>
  );

CASE II : Lets define the transition as a separate component.
Now the transition does not work. It does do the visible/disappear bit, but without any transition.
Also, if you set appear={true}, the entry transition works, but the exit transition does not

So I can infer that it has something to do with rendering vs just defining the transition, but would love to hear a more informed explanation.

import * as React from 'react';

import { Transition } from '@headlessui/react';

export default function TestScreen() {
  const [show, setShow] = React.useState(false);

  const MyTransition = () => (
    <Transition
      show={show}
      enter="transition-opacity duration-700"
      enterFrom="opacity-0"
      enterTo="opacity-100"
      leave="transition-opacity duration-700"
      leaveFrom="opacity-100"
      leaveTo="opacity-0"
      //   appear
    >
      <div className="p-8 mx-auto max-w-screen-xl bg-red-400">Hello</div>
    </Transition>
  );

  return (
    <div>
      <button className="text-white" onClick={() => setShow(prev => !prev)}>
        Toggle!
      </button>
      <MyTransition />
    </div>
  );
}

CASE III : And as the final case, lets do it this way. This now works again.

import * as React from 'react';

import { Transition } from '@headlessui/react';

export default function TestScreen() {
  const [show, setShow] = React.useState(false);

  const renderTrans = () => (
    <Transition
      show={show}
      enter="transition-opacity duration-700"
      enterFrom="opacity-0"
      enterTo="opacity-100"
      leave="transition-opacity duration-700"
      leaveFrom="opacity-100"
      leaveTo="opacity-0"
      //   appear
    >
      <div className="p-8 mx-auto max-w-screen-xl bg-red-400">Hello</div>
    </Transition>
  );

  return (
    <div>
      <button className="text-white" onClick={() => setShow(prev => !prev)}>
        Toggle!
      </button>
      <div className="p-3 bg-white">{renderTrans()}</div>
    </div>
  );
}

[manurana]

OK, I think i have some idea now, thanks to this and this (this second one is by Kent C. Dodds)

I still cannot claim to understand this fully, will take me a couple more reads + use cases, but I know the anti-pattern now

And based on this undestanding, the following works flawlessly

import * as React from 'react';

import { Transition } from '@headlessui/react';

const MyTransition = ({ showTransition }: { showTransition: boolean }) => (
  <Transition
    show={showTransition}
    enter="transition-opacity duration-700"
    enterFrom="opacity-0"
    enterTo="opacity-100"
    leave="transition-opacity duration-700"
    leaveFrom="opacity-100"
    leaveTo="opacity-0"
    //   appear
  >
    <div className="p-8 mx-auto max-w-screen-xl bg-red-400">Hello</div>
  </Transition>
);

export default function TestScreen() {
  const [show, setShow] = React.useState(false);

  return (
    <div>
      <button className="text-white" onClick={() => setShow(prev => !prev)}>
        Toggle!
      </button>
      <MyTransition showTransition={show} />
    </div>
  );
}