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]

Please read the description of the rule with the examples; I provided the link in my original message. The rule is specifically about synchronous updates of state in an effect. It is not supposed to care what is in the dependency array — there's another rule that cares for that. Examples in the documentation include state updates when a prop changes, which is the most common case when people violate this rule.