oissac_global_state v1.0.13
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 \ 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 \ 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