Chapter 53: delayRender() and continueRender()

Core Idea

delayRender() pauses the render to let an asynchronous task such as data fetching complete. It has no effect when you are in a preview environment (e.

Key Concepts

• Example
• Timeout
• Adding a label<AvailableFrom v="2.6.13"/>
• Multiple calls
• Encapsulation
• Data fetching
• Failing with an error<AvailableFrom v="4.0.374" />
• Retrying<AvailableFrom v="4.0.140"/>

Code Examples

export const MyVideo = () => {
  const [data, setData] = useState(null);
  const {delayRender, continueRender, cancelRender} = useDelayRender();
  const [handle] = useState(() => delayRender());

  const fetchData = useCallback(async () => {
    try {
      const response = await fetch('http://example.com/api');
      const json = await response.json();
      setData(json);

      continueRender(handle);
    } catch (err) {
      cancelRender(err);
    }
  }, []);

  useEffect(() => {
    fetchData();
  }, []);

  return <div>{data ? <div>This video has data from an API! {JSON.stringify(data)}</div> : null}</div>;
};

• What it demonstrates: Usage pattern for delayRender() and continueRender() from the official docs.

Key Takeaways

1. Understand example when working with delayRender() and continueRender().
2. Understand timeout when working with delayRender() and continueRender().
3. Understand adding a label<availablefrom v="2.6.13"/> when working with delayRender() and continueRender().
4. Understand multiple calls when working with delayRender() and continueRender().
5. Understand encapsulation when working with delayRender() and continueRender().

Connects To

• Cancel Render: related page in the Hooks & Data APIs section.
• Continue Render: related page in the Hooks & Data APIs section.
• Data Fetching: related page in the Hooks & Data APIs section.