Your localStorage commands look correct. But the issue is that you are not checking the storage everytime. You should have a state variable which you can use to indicate that something has changed and the storage needs to be checked again.

import "./styles.css";
import React, { useState, useRef, useEffect } from "react";

export default function App() {
  const [isLoggedIn, setLogin] = useState();
  const [change, setChange] = useState(false);

  useEffect(() => {
    if (localStorage.getItem("info") !== null) {
      setLogin(true);
    } else {
      setLogin(false);
    }
  }, [change]);

  console.log(isLoggedIn);

  return (
    <div className="App">
      {isLoggedIn ? (
        <h1>LocalStorage has something</h1>
      ) : (
        <h2>LocalStorage has nothing</h2>
      )}

      <button
        onClick={() => {
          localStorage.setItem("info", "true");
          setChange((change) => !change);
        }}
      >
        Add to Local
      </button>
      <button
        onClick={() => {
          localStorage.removeItem("info");
          setChange((change) => !change);
        }}
      >
        Remove to Local
      </button>
    </div>
  );
}

In the above code, change is changed when one of your storage command runs. You could have had a counter or anything else too. The main purpose is to check the storage everytime you are chaning stuff. This way you can have multiple storage commands (even more than 2), and then you can check your storage after every change.

link

Another simple approach could be to simply set the logged in state inside your functions where you run localStorage commands :

import "./styles.css";
import React, { useState, useRef, useEffect } from "react";

export default function App() {
  const [isLoggedIn, setLogin] = useState();

  useEffect(() => {
    if (localStorage.getItem("info") !== null) {
    setLogin(true);
    } else {
      setLogin(false);
    }
  }, [isLoggedIn]);

  console.log(isLoggedIn);

  return (
    <div className="App">
      {isLoggedIn ? (
        <h1>LocalStorage has something</h1>
      ) : (
        <h2>LocalStorage has nothing</h2>
      )}

      <button
        onClick={() => {
          localStorage.setItem("info", "true");
          setLogin(true);
        }}
      >
        Add to Local
      </button>
      <button
        onClick={() => {
          localStorage.removeItem("info");
          setLogin(false);
        }}
      >
        Remove to Local
      </button>
    </div>
  );
}

Now you have one lesser state variable, but you will be directly manipulating the logged in state from your buttons.

link

If you don't setItem("info") I mean If "info" does not exist in localStorage then you'll get "null" and your code will work. But If you set something to "info" in localStorage for example if you do localStorage.setItem(""), then you won't get null, you'll get empty string. Therefore your code should be:

useEffect(() => {
if (localStorage.getItem("info") !== null || localStorage.getItem("info") !== "") {
  setLogin(true);
} else {
  setLogin(false);
}
}, []);

if you use array instead of string in "info" then

useEffect(() => {
if (localStorage.getItem("info") !== null || JSON.parse(localStorage.getItem("info")).length > 0) {
  setLogin(true);
} else {
  setLogin(false);
}
}, []);

The problem is that on the load of the page, you are setting the existence/non-existence of the localStorage item in the state of the component. However, when an action (setItem/removeItem) is performed, you are not updating the state. The simple way to accomplish it is to update the state in the event listener itself.

<button onClick={() => {
    localStorage.setItem("info", "true");
    setLogin(true);
}}>Add to Local</button>

<button onClick={() => {
    localStorage.removeItem("info");
    setLogin(false);
}}>Remove to Local</button>

Here is an updated, forked sandbox link.