In this case, no, the useState setter function will never change, but useEffect doesn't know it is a function from another hook, it just sees a function.

Consider this use case:

const MyComponent = ({ onUpdate }) => {
  const [state, setState] = useState();
  useEffect(() => {
    // state updated, call onUpdate callback with state
    onUpdate(state);
  }, [onUpdate, state]);
  return ...
}

Now parent component can, given

<MyComponent onUpdate={onUpdateHandler} />

define onUpdateHandler as

let onUpdateHandler = console.log;

then later change it while still mounted

onUpdateHandler = state => dispatch({ type: 'SAVE_STATE', state });

By placing the callback in the dependency array the effect hook see the value of onUpdate changed and trigger the effect again. If it didn't include the callback then it would continue to console.log state updates instead of now handling it differently.

It is more likely for values to change than it is for functions to change, but function values can change. You likely have an eslinter that is recommending you add all the variables used within the hook to the dependency array, and this will in most cases be the correct thing to do. A few exceptions are for example, when you want an effect to compute ONLY when the component mounts by specifying an empty array, or not including some variables that are functions that you KNOW will never change during the life of the component, and in these cases you can use the eslint-disable-next-line react-hooks/exhaustive-deps override to unflag it as a warning. Caution though, as this will disable the linting checks so it is possible for bugs to creep in if not paying attention.

Short answer:

You can include setExpanded in the dependency array.

Long answer:

The function passed to useEffect will fire only when at least one of the dependencies changes:

useEffect(() => {
  // runs
  // - on mount
  // - on every render
})

useEffect(() => {
  // runs
  // - on mount only
}, [])

useEffect(() => {
  // runs
  // - on mount
  // - on renders where varA and/or varB change
}, [varA, varB])

You should avoid passing objects as dependencies, because they may trigger unnecessary re-renders. If varA is an object created on every render, it may have the same value but it won't be the same object, so it will be treated as change and fire up the useEffect. See the example below:

const varA = { a : 1 }
const varB = { a : 1 }

varA === varB // false

However, sometimes, certain objects are guaranteed to not produce this behaviour, and this is the case of the setState() function. According to the React Hooks API docs:

Note: React guarantees that setState function identity is stable and won’t change on re-renders.

This means that you can include it in the useEffect dependencies with no problem.

A short answer - we do not need it=)

This is your refactored code snippet:

export function EditComponent<T>(props: {
    initialState: T,
    onSave: (value: T) => void,
}) {
    const { initialState, onSave } = props;
    const [state, setState] = useState<T>(initialState);

    if (initialState !== state){
        setState(initialState);
    }
    
    function revert() {
        setState(initialState);
    }
    
    function save() {
        onSave(state);
    }
    
    return (
        ...
    )
}

Just conditionally update state during rendering.

There are 2 links which you may find helpful:

https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops

The context of an application does not persist across multiple pageloads or refreshes except through the few ways that allow for persistent data - such as local storage, cookies, and an API with a server somewhere. For the same reason, doing

let num = 5;
button.onclick = () => { num = 10; }

results in num still being 5 after you click and reload the page - because reloading the page starts the script from the very beginning again, on the new page.

If you want to keep track of whether that particular section of code has ever run before, use a flag in storage, eg:

useEffect(() => {
  if (localStorage.hasVisitedBefore) return;
  localStorage.hasVisitedBefore = 'yes';
  // rest of effect hook
, []);

One of the rules of React hooks is that useEffect must include all variables that it references in its dependency array. That's why you're getting the error. You can have additional variables, like varB, but you cannot exclude one, otherwise you could run into some wonky behavior.

A way around it is to use a ref, which allows you to store the value in a way that never triggers a render. The ref will need to be included in the dependency array, but since it never changes it won't trigger the useEffect again.

const varARef = useRef(varA)

useEffect(()=> {
  DO SOMETHING TO varARef.current;
}, [varARef, varB])

Note that if you do want varARef.current to stay in sync with varA, you'll want to add a line for that:

const varARef = useRef(varA)
varARef.current = varA

useEffect(()=> {
  DO SOMETHING TO varARef.current;
}, [varARef, varB])