App.js

export default function App() {
  const fetchTodos = useActions(actions => actions.fetchTodos);
  useEffect(() => {
    fetchTodos();
  }, [fetchTodos]);
  return (
    <div>
      <h1 style={{ margin: 0 }}>Todo</h1>
      <Todos />
      <AddTodo />
    </div>
  );
}

Why is fetchTodos passed as the second argument to useEffect. Won't React always skip the effect cause fetchTodos remains constant?
Should you not pass the state of todos instead?
Thank you and sorry.

This was more to appease the react-hooks eslint rule 😅

Since fetchTodos is guaranteed to remain constant, it will only run once throughout the lifecycle of this component.

On the first render, the effect has nothing to compare itself to so it will run the fetchTodos.
On every subsequent render, it will not fire due to fetchTodos being identical.

So in practice, this is the same as doing:

useEffect(() => {
    fetchTodos();
  }, []);

Ok, thank you very much for clearing my mind. I see now that it was intentional.