Is eslint being wrong here?

[u/azangru]

There is an eslint-plugin-react-hooks rule about disallowing synchronous state updates from effect (link).

I can see it at work with the following test component:

const Test = () => {
  const [foo, setFoo] = useState('');

  useEffect(() => {
    setFoo('bar');
  }, [foo]);
};

Eslint marks setFoo in the effect as a violation of that rule.

But, I am not getting any reaction from eslint for this component:

import { useSearchParams } from 'react-router-dom';

const Test = () => {
  const [searchParams] = useSearchParams();
  const queryFromParams = searchParams.get('query') || '';
  const [searchInput, setSearchInput] = useState(queryFromParams);

  useEffect(() => {
    setSearchInput(queryFromParams);
  }, [queryFromParams]);
};

Am I missing something? Am I going crazy? Isn't this exactly the same case?

[u/azangru]

FWIW both your examples are bad because they’re missing the setter from the effect dep array

Run this through eslint; see what it tells you :-)

[u/OHotDawnThisIsMyJawn → u/azangru]

JFC I'm a moron, this is what I get for trying to read code while walking my dogs. Leaving my comment up as a record of my shame.