@alentoma/usestate NPM

Getting Started

npm install @alentoma/usestate

Why use ObjectUseState

Well imagine that you have to many usestate. then you will also have to keep an eye for each and then await and so on.

Well with this library you can use an object as a usestate and it will be able to work the same as a simple react.useState when you change each property.

This Library also make thing faster when you have to many operation and changes to the states as it create a waiting list behind the code and make sure each changes is applied before the next change to be trigger.

The assign oepration is a sync operation, mening that you could already use the assigned data without waiting for useEffect to trigger.

import objectUseState from '@alentoma/usestate'

const state = objectUseState({
    counter: 0,
    item: { itemCounter: 0 },
    items:[]
  });
  
  React.useEffect(() => {
    if (!state.__isInitialized) return; // Optional
    console.log('counter is Changed');
  }, [state.counter]);

  React.useEffect(() => {
    if (!state.__isInitialized) return; // Optional
    console.log('itemCounter is Changed');
  }, [state.item.itemCounter]);

  React.useEffect(() => {
    if (!state.__isInitialized) return; // Optional
    console.log('items is Changed');
  }, [state.items]);
  
  // reset only counter and item
  const resetItem=()=> {
   state.__setValue({
      counter: 0,
      item: { itemCounter: 0 },
    });
  }
  
  return (
  <>
  <Text onPress={()=> {
    state.counter++
    console.log(state.counter) // you will see here that counter has increased already eg is a sync operation.
  }}> click to increate Counter {state.counter} </Text>
  <Text onPress={()=> state.item.itemCounter++}> click to increase ItemCounter {state.item.itemCounter} </Text>
  <Text onPress={()=> state.items = [...state.items, "02"]}> click to increase items {state.items.length} </Text>
  </>
  )

objectUseState constructor parameters

ParameterName	DefaulValue	Description
Item	TGeneric	assiged object for useState
hierarkiTree	true	Create trigger for all object tree, eg itemCounter for the above example
ignoreObjectKeyNames	undefined	The library will trigger change on propertyChange and this will rerender the component , use this if you want to execlude some object from this eg "item" for the above example. This is ofter used when you have a circular references problem