All 5 Render Props Pattern questions
More in Render Props Pattern
What is the render props pattern in React? What is a common naming alternative to render props, using children as a function instead? What is a downside of the render props pattern that developers should be aware of? How would you rewrite a render props component as a custom hook instead?
Advertisement
Back to results for “Custom Hooks”
React › Render Props Pattern

What is a simple real world example of the render props pattern being useful?

Beginner

Answer

A component that tracks whether the browser window is online or offline could use render props, letting different parts of an app show that information in completely different ways, such as a small icon in one place and a full banner message in another, all powered by the exact same shared logic.
function OnlineStatus({ render }) {
  const [isOnline, setIsOnline] = useState(navigator.onLine);
  useEffect(() => {
    const goOnline = () => setIsOnline(true);
    const goOffline = () => setIsOnline(false);
    window.addEventListener('online', goOnline);
    window.addEventListener('offline', goOffline);
    return () => {
      window.removeEventListener('online', goOnline);
      window.removeEventListener('offline', goOffline);
    };
  }, []);
  return render(isOnline);
}
Real-world example A messaging app uses a shared OnlineStatus component to show a small green dot in the header and a full warning banner at the top of the chat screen, both powered by the exact same online tracking logic through render props.

Common follow-ups: Would this same online status logic be simpler to share using a custom hook instead?;How would you test a component that uses the render props pattern?

Custom Hooks;Testing
All 5 Render Props Pattern questions