Root component doesn't re-render when conditionally returns NULL value

[zalishchuk]

Description

I am encountering a problem with my React Component, which conditionally returns either false or null. Strangely, Raycast does not trigger a re-render when List or Detail is replaced with null. Rendering an empty List works perfectly, but it appears that all falsy values prevent the view from updating, causing the command's current view to remain stuck on the previous render state. Using React Development Tools, I verified that everything functions correctly within React, yet Raycast fails to reflect these changes.

This issue first arose when I implemented a "Provider" component that conditionally returns null if the data isn't ready. Since I cannot predict which component will be passed as a child to this provider, I am unsure how to work around this issue myself. Consequently, I am submitting this bug report.

It looks like this issue primarily relates to the "root" components, which are the first in the tree. All other non-root components manage null just fine!

Steps To Reproduce

Example Command Component:

• Returning null will cause it to remain at count 4 until it resumes at 11.
• When returning the Details component, it will promptly replace the List with the Detail component as intended.

import { Detail, List } from '@raycast/api';
import { useEffect, useRef, useState } from 'react';

function useInterval(callback: () => void, delay: number | null) {
  const savedCallback = useRef(callback);

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    if (delay !== null) {
      const id = setInterval(() => savedCallback.current(), delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

function Command() {
  const [count, setCount] = useState(0);

  useInterval(() => {
    if (count >= 15) return;
    setCount(count => count + 1);
  }, 1000);

  if (count >= 5 && count <= 10) return null;

  // This code above will work as expected.
  // if (count >= 5 && count <= 10) return <Details markdown="This is a markdown string" />;

  return (
    <List>
      <List.Item title="Hello World" />
      <List.Item title="Foo Bar" />
      <List.Item title={String(count)} />
    </List>
  );
}

export default Command;

Current Behaviour

• Renders a List component with a counter.
• Rendering stops when the counter reaches 4.
• Rendering resumes when the counter reaches 11.

Expected Behaviour

• Renders a List component with a counter.
• Completely unmounts the List component.
• Remounts the List component when the counter value reaches 11.