gstore-js v1.0.1

gStore – Cut Down ReactJS Re-renders with No Hassle

This library helps you avoid unnecessary re-renders effortlessly.

Install

npm install gstore-js

Usage

In the examples below, we update child components from the parent without re-rendering the parent component.

Simple example

import gStore from 'gstore';

gStore.setInitial({book: 0, toys: 0});

export default function Parent() {
  gStore.useResetOnUnmount(['books', 'toys']);

  return <div>
    <button onClick={() => gStore.books.current += 1}>Add book</button>
    <Books/>
    <button onClick={() => gStore.toys.current += 1}>Add toy</button>
    <Toys/>
  </div>
}

function Books() {
  const books = gStore.books.useCurrent()
  return <div>{books}</div>   
}

function Toys() {
  const toys = gStore.toys.useCurrent()
  return <div>{toys}</div>
}

Example with nested state

import gStore from 'gstore';

gStore.setInitial({
  books: 0,
  games: {
    educational: {
      programming: 0,
      physics: 0,
    },
    shooters: 0,
  },
});

export default function Parent() {
  gStore.useResetOnUnmount(['books', 'games']);

  return <div>
    <button onClick={() => gStore.books.current += 1}>Add book</button>
    <Books/>
    <button onClick={
      () => gStore.games.useCurrent(v => v.educational.programming += 1)
    }>Add programming games"</button>
    <Toys/>
  </div>
}

function Books() {
  const value = gStore.books.useCurrent()
  return <div>{value}</div>   
}

function ProgrammingGames() {
  const value = gStore.games.useCurrent(games => games.educational.programming)
  return <div>{value}</div>
}

Instructions for Using the Package

1. Define Initial Values

There are multiple ways to define initial values for the store:

• Define multiple values: gStore.setInitial({ books: 0, toys: 0 });
• Define a single value: gStore.books.initial = 0;

Note: Setting an initial value automatically sets the current value as well.

To read an initial value, use: gStore.books.initial;

2. Reset Current Values

Since we're working with a global state, it's important to reset values when needed to avoid unintended side effects across the app. You can reset values back to their initial state using the following methods:

• Reset multiple values immediately: gStore.reset(['books', 'toys']);
• Reset a single value: gStore.books.reset();

You can also use hooks to reset values during component mount and unmount:

• Reset multiple values on mount and unmount: gStore.useReset(['books', 'toys']);
• Reset multiple values on mount: gStore.useResetOnMount(['books', 'toys']);
• Reset multiple values on unmount: gStore.useResetOnUnmount(['books', 'toys']);
• Reset a single value on mount and unmount: gStore.books.useReset();
• Reset a single value on mount: gStore.books.useResetOnMount();
• Reset a single value on unmount: gStore.books.useResetOnUnmount();

3. Set Current Values

Use one of these ways to set the current value:

• Set a single value: gStore.books.current = value;
• Set multiple values: gStore.setCurrent({ books: 5, toys: 5 });
• Set current value by selector: gStore.educational.setCurrent(educational => educational.programming += 10);

4. Get Current Values

Use one of these ways to get the current value:

• Use a hook to get the current value: gStore.educational.useCurrent(educational => educational.programming);
• Get the current value instantly: gStore.educational.current;

API

API Documentation

gStore.setInitial(initialValues: Object)

Sets initial values for multiple keys. Automatically sets the current value as well.

• Example: gStore.setInitial({ books: 0, toys: 10 });

gStore.setCurrent(currentValues: Object)

Sets current values for multiple keys.

• Example: gStore.setCurrent({ books: 5, toys: 2 });

gStore.reset(keys: Array<string>)

Resets current values for the specified keys to their initial values.

• Example: gStore.reset(['books', 'toys']);

gStore.useReset(keys: Array<string>)

Hook to reset values on mount and unmount.

• Example: gStore.useReset(['books', 'toys']);

gStore.useResetOnMount(keys: Array<string>)

Hook to reset values only on mount.

• Example: gStore.useResetOnMount(['books', 'toys']);

gStore.useResetOnUnmount(keys: Array<string>)

Hook to reset values only on unmount.

• Example: gStore.useResetOnUnmount(['books', 'toys']);

gStore.yourValue

Accesses the current value of a specific store property.

• Example: const currentBooks = gStore.books;

gStore.yourValue = value

Sets the current value of a specific store property.

• Example: gStore.books = 5;

gStore.yourValue.useCurrent(selector?: Function)

Hook to get the current value of a specific store property.

• Example: const currentBooks = gStore.books.useCurrent();

gStore.yourValue.setCurrent(updater: Function)

Sets the current value of a specific store property using an updater function.

• Example: gStore.books.setCurrent(books => books + 1);

gStore.yourValue.reset()

Resets the current value of a specific store property to its initial value.

• Example: gStore.books.reset();

gStore.yourValue.useReset()

Hook to reset the current value of a specific store property on mount and unmount.

• Example: gStore.books.useReset();

gStore.yourValue.useResetOnMount()

Hook to reset the current value of a specific store property on mount.

• Example: gStore.books.useResetOnMount();

gStore.yourValue.useResetOnUnmount()

Hook to reset the current value of a specific store property on unmount.

• Example: gStore.books.useResetOnUnmount();