[Bug]: useContext does not always require destructuring-assignment

[uipoptart]

Is there an existing issue for this?

• I have searched the existing issues and my issue is unique
• My issue appears in the command-line and not only in the text editor

Description Overview

Hi! This library is awesome!

In latest (7.33.2) I'm getting a linting error for a non-destructured assign from useContext. Looking at the React docs for useContext I think the context value might not always require destructuring.

Expected Behavior

Here is a simple example based on the React docs for creating a context. In this example mapping over the items returned from useContext yields the following linting error:

Must use destructuring availableFonts assignment react/destructuring-assignment

import React, { useContext } from 'react';

const items = ['beep', 'boop', 'bop'];
const MyContext = React.createContext<string[]>(items);

const ParentComponent = () => (
  <MyContext.Provider value={items}>
    <ChildComponent />
  </MyContext.Provider>
);

const ChildComponent = () => {
  const itemsFromContext = useContext(MyContext);
  return (
    <div>
      {itemsFromContext.map((name:string) => ( // Linting error here
        <span>{name}</span>
      ))}
    </div>
  );
};

eslint-plugin-react version

v7.31.11

eslint version

v8.28.0

node version

v8.19.2

[uipoptart]

🤦 Hit submit before completing.

Expected behavior

In the example I would expect that itemsFromContext.map would be valid and not produce the linting error.

[ljharb]

That seems like #3583 should have solved it, released in v7.33.0 (see #3536).

@102 thoughts?

[102]

That seems like #3583 should have solved it, released in v7.33.0 (see #3536).

@ljharb we were indeed able to upgrade from 7.31.11 to 7.33.0 without the mentioned problem within our codebase. I have also tried 7.33.2, and couldn't reproduce the problem.

@uipoptart in your error message, availableFonts is mentioned as a variable to be destructured, but in the code example itemsFromContext is mentioned -- could you please double-check that you are running the checks against the code that you expect to run it against

Another thing that I'd also double check is the eslint-plugin-react version that you actually use (e.g. that none of global versions of dependencies are involved, or that no other dependencies are preventing you from having ^7.33 instead of 7.32).

If this won't help, it would great if you will be able to provide some isolated example of the problem in form of repo or sandbox of some kind.

[uipoptart]

Thank you for the quick replies and sorry for the trouble. It is fixed, I just needed to restart VS Code for it to lint with the updated version.

[102]

Thank you for the quick replies and sorry for the trouble. It is fixed, I just needed to restart VS Code for it to lint with the updated version.

There is also Restart ESLint server action available for this in VSCode 🙂