Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: 'exhaustive-deps' lint rule warns that "Outer scope values" aren't valid when a hook is inside a function #25958

Open
finnp opened this issue Jan 3, 2023 · 3 comments
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug

Comments

@finnp
Copy link

finnp commented Jan 3, 2023

React version: 18.1.0

Steps To Reproduce

Inside a functional component, an inner function with a dependency on value from an outer function triggers the warning, "Outer scope values like '....' aren't valid dependencies because mutating them doesn't re-render the component."

Here's the crux of the problem

const List = (props: IListProps) => {
  const { items } = props;

  // Using the useMemo hook here doesn't complain, e.g. -
  // const names = useMemo(() => items.map(item => item.name), [items]);

  // Using the useMemo hook inside a function complains
  const names = useItemNames();

  return (
    <>
      <h2>There are {items.length} items in the list</h2>
      <section>
        {names.map(name => (
          <div>{name}</div>
        ))}
      </section>
    </>
  );

  ////////////////////

  function useItemNames() {
    // es-lint warns here: Outer scope values like 'items' aren't valid dependencies 
    // because mutating them doesn't re-render the component
    return useMemo(() => items.map(item => item.name), [items]);
  }
};

Link to code example: https://codesandbox.io/s/custom-hook-repro-3wfly

The current behavior

The eslint rule will complain about unneccessary dependencies.

The expected behavior

The eslint rule shouldn't be triggered.

This is a reopen and copy of #17060 by @gerrod

@finnp finnp added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Jan 3, 2023
@sadiki-o
Copy link

sadiki-o commented Jan 6, 2023

i was just messing with the sandbox you posted early, can you check this one if it does the job you want it to do:
sandbox.
i believe useMemo is used to store results of heavy computations, and when the dependancy array changes it re-run the callback you provide it with. Also i see no reason to use useMemo inside another function.

Copy link

github-actions bot commented Apr 9, 2024

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

@github-actions github-actions bot added the Resolution: Stale Automatically closed due to inactivity label Apr 9, 2024
@finnp
Copy link
Author

finnp commented Apr 10, 2024

I would need to check

@github-actions github-actions bot removed the Resolution: Stale Automatically closed due to inactivity label Apr 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug
Projects
None yet
Development

No branches or pull requests

2 participants