Is there a good way to use React hooks inside a callback or render prop? - reactjs

Question

Often times I find myself creating or using components where callbacks are used to create part of the component tree, as in these two simplified examples:
// Example 1: Render an array of components
const ExampleComponent1 = () => (
<ul>
{items.map((item) => <li key={item.id} style={{ paddingTop: item.paddingTop }}>{item.label}</li>)}
</ul>
);
// Example 2: Use render props
const ExampleComponent2 = () => (
<Dialog
renderHeader={useCallback((dialogCtx) => 'Header', [])}
renderBody={useCallback((dialogCtx) => <button onClick={() => dialogCtx.closeDialog(null)}>Test</button>, [])}
/>
);
As you can see, the callback results in both cases are dependent on the callback argument. In order to avoid a new style object (in example 1) and a new onClick function (in example 2) to be created on every render, I should wrap them in useMemo/useCallback, but that is not possible here because they are created inside the callbacks rather than on the root level of the component.
The only way that I'm aware of to work around this problem is to create designated components for each callback:
// Example 1: Render an array of components
const ExampleComponent1 = () => (
<ul>
{items.map((item) => <ExampleComponent1Item key={item.id} item={item}/>)}
</ul>
);
const ExampleComponent1Item = ({ item }) => <li style={useMemo(() => ({ paddingTop: item.paddingTop }), [item.paddingTop])}>{item.label}</li>;
// Example 2: Use render props
const ExampleComponent2 = () => (
<Dialog
renderHeader={useCallback((dialogCtx) => <ExampleComponent2Header dialogCtx={dialogCtx}/>, [])}
renderBody={useCallback((dialogCtx) => <ExampleComponent2Body dialogCtx={dialogCtx}/>, [])}
/>
);
const ExampleComponent2Header = ({ dialogCtx }) => 'Header';
const ExampleComponent2Body = ({ dialogCtx }) => <button onClick={useCallback(() => dialogCtx.closeDialog(null), [dialogCtx.closeDialog])}>Test</button>;
You can already see in this simplified example how splitting up the app in such a way creates a lot of additional code and makes the app much harder to read. In more complex scenarios where a lot of props from the parent component need to be reused in the sub component, the sub components will become even more bulky, particularly when prop types need to be defined as well.
It seems to me that both of these example are rather common use cases, since callbacks are the only way to generate a list of components from an array in React, and render props are a common pattern in more complex components. I'm wondering:
Is there any way how I could write the above example without splitting off the callback results into separate components? For example some way to use hooks directly inside the callbacks.
Is there an alternative pattern for mapping an array to a list of components that doesn't rely on callbacks, so hooks can be used?
Is there an alternative pattern to render props that makes it easier to use hooks?
Update: To make it clear, I’m looking for a programming pattern, not specific problems in the simplified example code above.

Answer 1

I don't understand what's wrong with example 1.
const ExampleComponent1 = () => (
<ul>
{items.map((item) => <li key={item.id} style={{ paddingTop: item.paddingTop }}>{item.label}</li>)}
</ul>
);
This is perfectly fine in React. Until you can see that the style prop is causing performance issues, you shouldn't try to optimize it.
Version with hooks, in case you somehow really need it:
const ExampleComponent1Item = ({ item }) => {
const style = useMemo(() => ({ paddingTop: item.paddingTop }), [item.paddingTop]);
return (<li style={style}>{item.label}</li>);
};
const ExampleComponent1 = () => (
<ul>
{items.map((item) => <ExampleComponent1Item key={item.id} item={item}/>)}
</ul>
);
The same goes for example 2:
const ExampleComponent2 = () => {
const renderHeader = useCallback((dialogCtx) => 'Header', []);
const renderBody = useCallback((dialogCtx) => <button onClick={() => dialogCtx.closeDialog(null)}>Test</button>, []);
return (<Dialog renderHeader={renderHeader} renderBody=renderBody}/>);
};
If you want to avoid the onClick function to be recreated each time renderBody is called, you can do:
const ExampleComponent2Body = {( dialogCtx }) => {
const onClick = useCallback(() => dialogCtx.closeDialog(null), [dialogCtx.closeDialog]);
return (<button onClick={onClick}>Test</button>);
};
const ExampleComponent2 = () => {
const renderHeader = useCallback((dialogCtx) => 'Header', []);
const renderBody = useCallback((dialogCtx) => <ExampleComponent2Body dialogCtx={dialogCtx}/>, []);
return (<Dialog renderHeader={renderHeader} renderBody=renderBody}/>);
};