How to implement rendering when value changes in ReactJS

Question

When I click add to favorites (add to local storage but not update the count, when I click the button ref, the count is updated, I am doing this for my e-commerce project, I have a wish list. When I When adding an item to wishlist, I add the item to local storage. I need to display the number of items I added to wishlist. I don't know how to automatically render the header when the value (local storage) changes.

I added a button that calls cou via onClick. When I add the item to the wishlist, nothing happens (no rendering) and when I click the button everything is fine. Can anyone help? Everything is on the header component (page)

const [count, setCount] = useState((JSON.parse(localStorage.getItem("liked"))));


  const cou = () => {
    let oldData = JSON.parse(localStorage.getItem('liked') || "[]")
    if (oldData.length === count.length) {
      setCount((JSON.parse(localStorage.getItem("liked"))))
    } else {
      setCount((JSON.parse(localStorage.getItem("liked"))))
    }
  };

  useEffect(() => {
    let oldData = JSON.parse(localStorage.getItem('liked') || "[]")
    if (oldData.length === count.length) {
      setCount((JSON.parse(localStorage.getItem("liked"))))
    } else {
      setCount((JSON.parse(localStorage.getItem("liked"))))
    }
  }, [(count.length)]);

This is the span on the header

<span style={{ position: 'relative', left: '-21px', top: '-18px' }}>{count.length}</span>

Answer 1

Instead of writing [(count.length)], can you use [count] to check? Please tell me the output.