Instructions in English

Introduction

Works similarly to Context Api, but does not need to use a Provider and manages the components that should be rendered in isolation.

import the component:

import { newGlobalState } from "oissac_global_state"

create the states

const { useValue:useNumber, setValue:setNumber } = newGlobalState(0);

code example

notice that only <Info> will render when the value changes when clicking on the button

'use client'

import { useCallback } from "react";
import { newGlobalState } from "oissac_global_state"

const log = console.log;

const { useValue:useInc, setValue:setInc } = newGlobalState<number>(0);

export default function Home() {
  log('render Home');
  return (
    <div style={{display:"flex", flexDirection: 'column'}}>
      <Button />
      <Info />
    </div>
  );
}

function Button() {
  log('render Button');
  const handleClick = useCallback(() => setInc(prev => ++prev), []);
  return <button onClick={handleClick}>Add</button>
}

function Info() {
  log('render Info');
  const value = useInc();
  return <div>Value inc: {value}</div>
}

Important

This component works on the client side, so remember to declare 'use client' in the components responsible for creating it when you use it in nextjs.

Instruções em Português

Introdução

funciona de forma semelhante ao Context Api, mas não precisa usar um Provider e administra os componentes que devem ser renderizado de forma isolada.

import o component:

import { newGlobalState } from "oissac_global_state"

crie os states

const { useValue:useNumber, setValue:setNumber } = newGlobalState(0);

exemplo de código

perceba que apenas o <Info> vai renderizar durante a alteração do valor ao clicar no batão

'use client'

import { useCallback } from "react";
import { newGlobalState } from "oissac_global_state"

const log = console.log;

const { useValue:useInc, setValue:setInc } = newGlobalState<number>(0);

export default function Home() {
  log('render Home');
  return (
    <div style={{display:"flex", flexDirection: 'column'}}>
      <Button />
      <Info />
    </div>
  );
}

function Button() {
  log('render Button');
  const handleClick = useCallback(() => setInc(prev => ++prev), []);
  return <button onClick={handleClick}>Add</button>
}

function Info() {
  log('render Info');
  const value = useInc();
  return <div>Value inc: {value}</div>
}

Importante

este componente funciona do lado cliente, então lembre de declarar 'use client' nos responsáveis da criação quando for tratar no nextjs