The render props pattern is a powerful technique in React that allows you to share logic between components by passing a function as a prop. This function, often called the render prop, is responsible for returning a React element, and it can receive arguments from the parent component. To use this pattern effectively in TypeScript, you need to ensure that the function prop is correctly typed so that both the data passed to the function and the component's output are type safe.

When typing the render function prop, you typically define a prop (often named render or children) that is a function. This function receives specific arguments, which you describe using TypeScript types or interfaces, and returns a React.ReactNode. Typing the render prop ensures that the consumer of your component knows what data will be provided and what type of element should be returned. This prevents runtime errors and improves the developer experience by providing clear type hints and autocompletion.

To illustrate how to type render props for flexible component composition, consider a component that manages some state and exposes it via a render prop. You define an interface for your props, specifying that the render prop is a function that takes an object describing the state and returns a React.ReactNode. Here is a markdown example of how you might define such a component:

import React from "react";

type CounterRenderProps = {
  count: number;
  increment: () => void;
};

type CounterProps = {
  render: (props: CounterRenderProps) => React.ReactNode;
};

function Counter({ render }: CounterProps) {
  const [count, setCount] = React.useState(0);
  const increment = () => setCount(c => c + 1);

  return <>{render({ count, increment })}</>;
}

// Usage
<Counter
  render={({ count, increment }) => (
    <div>
      <span>Count: {count}</span>
      <button onClick={increment}>Increment</button>
    </div>
  )}
/>;

In this example, the Counter component defines a render prop that is a function accepting an object with a count and an increment function. By typing the render prop using CounterRenderProps, you provide clear expectations for what the consumer's function will receive. This approach can be adapted for more complex scenarios, such as components that expose asynchronous data, event handlers, or even multiple values for composition.