An example of React hooks using a single data source with React context.

persistedHookState.js

import { useState, createContext, useContext, useEffect } from "react";
import "./styles.css";

const AuthContext = createContext({});

const useAuth = () => useContext(AuthContext);

const AuthProvider = ({ children }) => {
  const [username, setUsername] = useState("");
  const handleUpdateUsername = ({ target: { value } }) => setUsername(value);
  return (
    <AuthContext.Provider
      value={{ username, setUsername, handleUpdateUsername }}
    >
      {children}
    </AuthContext.Provider>
  );
};

const ComponentOne = () => {
  const { username, setUsername } = useAuth();
  useEffect(() => {
    setUsername("santa");
  }, []);
  return <p>{username}</p>;
};
const ComponentTwo = () => {
  const { username } = useAuth();
  return <p>{username}</p>;
};
const ComponentThree = () => {
  const { handleUpdateUsername } = useAuth();
  return (
    <div>
      <label>Update username</label>
      <br />
      <input placeholder="new username" onChange={handleUpdateUsername} />{" "}
    </div>
  );
};

export default function App() {
  return (
    <AuthProvider>
      <div className="App">
        <ComponentOne />
        <ComponentTwo />
        <ComponentThree />
      </div>
    </AuthProvider>
  );
}