I often find myself needing to prevent useEffect from running on the initial render and only triggering it when dependencies change. To make this easier, I want to create a custom hook that handles this. How can I create such a hook in React?

This is my code:

import React, { useState, useEffect } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);


  useEffect(() => {
    // i want to save the count variable only when count is updated
    localStorage.setItem('count', count + '') // but it set the localStorage count to 0, making my code useless
  }, [count]);


  useEffect(() => {
    // load save count if available
    let count = localStorage.getItem('count')
    if(count) {
       setCount(parseInt(count))
    }
  }, [])

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

This code saves count into the localstorage every time the component loads, so count is set to 0 every time, and when it time to load the count variable from the localStorage, it reads 0

How can I create a React hook to run effectful code only when one of the deps change?