hookstore-snippet-useStore

hookstore-snippet-useStore.jsx

import { store, useStore } from './hookstore';

// setting the store initial state
store.state = 0;

function StatefulHello() {
  // using the useStore hook
  const [timesClicked, updateTimesClicked] = useStore();

  return (
    <div>
      <h1>Hello, component!</h1>
      <h2>The button inside this component was clicked {timesClicked} times</h2>
      <button type="button" onClick={() => updateTimesClicked(timesClicked + 1)}>
        Update
      </button>
    </div>
  );
}

function AnotherComponent() {
  // using the useStore hook here as well. The same state will be shared here.
  const [ timesClicked ] = useStore();
  return (
    <div>
      <h1>
        Hello, this is a second component, with no relation to the one on the
        top
      </h1>
      <h2>
        Using the useStore hook, I know the user clicked on the button { timesClicked } times!
      </h2>
    </div>
  );
}