setState inside useEffect or useCallback, dependency issue

Solution 1:

I think this should work (using the setState function variant). That way you do not have a dependency on list (and it is also more correct in edge cases)

const Component = () => {
  const [list, setList] = useState<Array<{ message: string }>>([]);

  const removeMessage = useCallback((message: string) => {
    setList(prev => prev.filter(x => x.message !== message));
  }, []);

  useEffect(() => {
    removeMessage('test');
  }, [removeMessage]);
};