consistent-function-scoping: Ignore within useEffect in React Hooks

[garyking]

In React Hooks, I got:

useEffect(() => {
  async function getItems() {}
  
  getItems()
}, [])

And it's definitely better to keep the function in the useEffect, to group it together. But this rule recommends moving out the function, of course.

Perhaps perform a check if the function is in useEffect, to ignore it?

[MrHen]

Hm, this is an interesting exception to the rule. Things like hooks or listeners might not have any references to the parent scope.

[futpib]

And it's definitely better to keep the function in the useEffect, to group it together.

Is it definitely better? I imagine getItems having some fetching or other global side-effect code, in which case it would be better not only to move it out of the component, but maybe even into a separate file or a module.

Can you provide a more verbose (closer to real life) example to make this clearer?

[garyking]

It's recommended per the React docs, at least.

[futpib]

Now that's a different case, they have ChatAPI.subscribeToFriendStatus (which I would consider analogous to getItems from your example) defined somewhere outside the component and useEffect call, that's what I'd do (define it in a separate file). In this example handleStatusChange would not be reported as it captures setIsOnline from the component scope.

EDIT: Oh wait, I guess the rule would report handleStatusChange as it could be defined in the component scope. I don't think it's a problem, but I see what the issue is about, thanks!

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

[fisker]

useEffect(() => {
  async function getItems() {
    function foo() {} 
  }
  
  getItems()
}, [])

What do we do with function foo?

1. ignore
2. move to top of useEffect
3. move to top of file

[hatched-tom]

@fisker I believe 2 makes the most sense here, unless I'm missing something

[charliematters]

This doesn't seem to work when using the default import of react:
React.useEffect(() => { ... })