hooks.ts

export const useStateChangeEffect = <S>(
	initialState: S,
	effect: (arg: S) => void,
	runIf: (arg: S) => boolean = isTrue => !!isTrue,
) => {
	const [state, setState] = useState(initialState);
	const prevState = useRef(state);
	const triggerEffect = runIf(state) && state !== prevState.current;
 
 	useEffect(() => void (triggerEffect && effect(state)), [effect, state, triggerEffect]);
	useEffect(() => void (prevState.current = state)); // note: must come after
 
 	return [state, setState] as const;
};