React use callback factory

It is very simple React hook to create callback factories

Installation

npm i react-use-callback-factory

yarn add react-use-callback-factory

Use

const onClickFactory = useCallbackFactory((id) => () => onClick(id), [onClick]);
const onChangeFactory = useCallbackFactory((id) => (value: string) => onChange(id, value), [onChange]);

...

<Component onClick={onClickFactory(id)} onChange={onChangeFactory(id)} />

Some notes

Don't forget to add this hook to ESLint to avoid mistakes with dependencies.

Why this hook?

Quite often you can find the code like that:

const Component = ({anyArray, onClick}) => {
    return <>
        {
            anyArray.map(
                ({id, name}) => 
                    <AnotherMemoComponent onClick={() => onClick(id)}>
                        {name}
                    </AnotherMemoComponent>
            )
        }
    </>
}

We can see that it is memo component, but we use arrow function to create callback and break the memo. Quite often we can see something like that as decision:

const Component = ({anyArray, onClick}) => {
    const onClickFactory = useCallback((id) => onClick(id), [onClick]);
    return <>
        {
            anyArray.map(
                ({id, name}) => 
                    <AnotherMemoComponent onClick={onClickFactory(id)}>
                        {name}
                    </AnotherMemoComponent>
            )
        }
    </>
}

It seems that it can help, but it is wrong. Factory will be the same, but result will be the same.

That why we have this hook:

const Component = ({anyArray, onClick}) => {
    const onClickFactory = useCallbackFactory((id) => () => onClick(id), [onClick]);
    return <>
        {
            anyArray.map(
                ({id, name}) => 
                    <AnotherMemoComponent onClick={onClickFactory(id)}>
                        {name}
                    </AnotherMemoComponent>
            )
        }
    </>
}

We use new hook instead, but memoization under the hood will help us to avoid issues.

Happy programming!