[eslint-plugin-react-hooks] Add whitelist for functions that are not to be considered as callbacks

I have a library to hook mobx with react: https://github.com/xaviergonz/mobx-react-component

Hooking is usually done via a wrapper method named “mobxObserver” and is used like this:

export const MyComponent = memo(
    mobxObserver(
        (props: IMyComponentProps) => {
          // React.useLayoutEffect(...) // will warn
        }
))

however as soon as a hook is used inside the component the eslint rule-of-hooks will warn with:

React Hook "React.useLayoutEffect" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.

If a named function is used it works, but it is far from ideal (e.g. name repetition):

export const MyComponent = memo(
    mobxObserver(
        function MyComponent(props: IMyComponentProps) {
          // React.useLayoutEffect(...) // won't warn
        }
))

Would it be possible to have a custom whitelist of methods that are allowed to wrap the functional component without raising this warning? (same as React.memo is whitelisted right now)

E.g. something like:

allowedWrappers: [ "mobxObserver" ] 

Or even better, do not consider a callback something that is just wrapping the functional component, but I’m not sure if that’s feasible.

Thanks.

[OliverJAsh]

As a workaround to the problem of not being able to call a hook conditionally, I am using the following workaround which wraps the hook into a conditional component call via a render prop:

https://unsplash.com/blog/calling-react-hooks-conditionally-dynamically-using-render-props/

const RenderFunction = ({ children }) => children();

const MyComponent = ({ shouldRenderHook }) =>
  shouldRenderHook ? (
    <RenderFunction>
      {() => {
        // `react-hooks/rules-of-hooks` error:
        // React Hook "React.useState" cannot be called inside a callback. React Hooks must be
        // called in a React function component or a custom React Hook function.
        const [state, setState] = React.useState(0);
        return (
          <div>
            State: {state}
            <button onClick={() => setState(currentState => currentState + 1)}>
              Increment
            </button>
          </div>
        );
      }}
    </RenderFunction>
  ) : (
    <div>Rendering the hook shortly…</div>
  );

https://stackblitz.com/edit/react-conditional-hooks-simple

IIUC, this is perfectly safe because the children render prop callback is called every time the RenderFunction component is called, yet the ESLint rule throws an error.

It would be great if there was a way to tell the ESLint rules that this is safe.

For context: I understand that an alternative workaround would be just to extract another component, but that is not always desirable because then you lose access to the component’s closure, which means you have to drill things down.

[SamuelPinho]

Bump