use()

The use() hook enables reactive state management in React components. When the selected state values change, your component will automatically re-render with the latest data.

import { createStore } from 'finalstore';
 
const store = createStore({
  states: {
    count: 0,
    user: null as { name: string } | null
  },
  actions: {}, // Required, even if empty
  selectors: {
    userInfo: (state) => ({
      name: state.user?.name,
      count: state.count
    })
  }
});

Basic Usage

function Counter() {
  // Get entire state
  const state = store.use();
 
  // Get specific value using custom selector (recommended)
  const count = store.use((state) => state.count);
 
  return <div>Count: {count}</div>;
}

With Custom Selectors

function UserProfile() {
  const { user, count } = store.use((state) => ({
    user: state.user,
    count: state.count
  }));
 
  return (
    <div>
      <p>User: {user?.name}</p>
      <p>Count: {count}</p>
    </div>
  );
}

With Predefined Selectors

function UserInfo() {
  // Using predefined selector
  const userInfo = store.useSelector.userInfo();
 
  return (
    <div>
      <p>User: {userInfo.name}</p>
      <p>Count: {userInfo.count}</p>
    </div>
  );
}

On this page