Hint
Render props invert control: the component owns STATE/behavior, the caller owns RENDERING. This is how libraries like react-table and Downshift work.
// DataFetcher exposes data via render prop
function DataFetcher(url, render) {
// Simulated data
const data = { users: ['Alice', 'Bob'], count: 2 };
return render(data);
}
// Different rendering strategies for same data
const list = DataFetcher('/api/users', ({ users }) =>
'List: ' + users.join(', ')
);
const count = DataFetcher('/api/users', ({ count }) =>
'Count: ' + count
);
const table = DataFetcher('/api/users', ({ users }) =>
'Table rows: ' + users.length
);
console.log(list);
console.log(count);
console.log(table);List: Alice, Bob Count: 2 Table rows: 2
Explanation: DataFetcher provides the data; the caller decides how to render it. Three different callers produce three different outputs from the same data.
Key Insight: Render props invert control: the component owns STATE/behavior, the caller owns RENDERING. This is how libraries like react-table and Downshift work.