React: What is the render props pattern in React?

1// Mouse tracker component
2function MouseTracker({ children }: { children: (pos: {x: number, y: number}) => React.ReactNode }) {
3  const [position, setPosition] = useState({ x: 0, y: 0 });
4
5  useEffect(() => {
6    const handleMouseMove = (e: MouseEvent) => {
7      setPosition({ x: e.clientX, y: e.clientY });
8    };
9    window.addEventListener("mousemove", handleMouseMove);
10    return () => window.removeEventListener("mousemove", handleMouseMove);
11  }, []);
12
13  return <>{children(position)}</>;
14}
15
16// Usage
17<MouseTracker>
18  {({ x, y }) => (
19    <div>Mouse is at ({x}, {y})</div>
20  )}
21</MouseTracker>

1function DataLoader<T>({ url, children }: { url: string; children: (data: T) => React.ReactNode }) {
2  const [data, setData] = useState<T | null>(null);
3  const [loading, setLoading] = useState(true);
4
5  useEffect(() => {
6    fetch(url)
7      .then(res => res.json())
8      .then(setData)
9      .finally(() => setLoading(false));
10  }, [url]);
11
12  if (loading) return <Spinner />;
13  return <>{data && children(data)}</>;
14}
15
16// Usage
17<DataLoader url="/api/user">
18  {(user) => <UserProfile user={user} />}
19</DataLoader>