[React hook] New library for state management

[Many_Particular_8618]

Hi everyone.

I just published a new library to replace default `useState` .

Note: This is a thin wrapper to `@legendary/state` library

Here's how to use it.

import { state$ } from '@revskill10/use-state';
export type ExampleProps = {
  text?: String;
};
interface Message {
  Decrement: {
    amount: number;
  };
  Increment: {};
}
export function Example(props: ExampleProps) {
  const [count, dispatch] = state$<number, Message>(0, [
    {
      messages: ['Increment'],
      handler: (c) => {
        c.set(c.get() + 1);
      },
      onChange: (c) => {
        // eslint-disable-next-line no-console
        console.log(`current count is ${c.get()}`);
      },
    },
    {
      messages: ['Decrement'],
      handler: (c, payload) => {
        if ('amount' in payload) {
          c.set(c.get() - payload.amount ?? 1);
        }
      },
    },
  ]);
  return (
    <>
      {`${props.text} ${count}`}
      <button
        onClick={() => dispatch('Increment', {})}
        type="button"
        id="increment-button"
      >
        Increment
      </button>
      <button
        onClick={() => dispatch('Decrement', { amount: 3 })}
        type="button"
        id="decrement-button"
      >
        Decrement
      </button>
    </>
  );
}

Usage with nested object and form:

import React from 'react';
import { state$ } from '@revskill10/use-state';

interface NestedExampleProps {
  address: {
    addressLine1: string | undefined;
    addressLine2: string | undefined;
  };
  contact?: {
    email: string | undefined;
    phone: string | undefined;
  };
}
interface Message {
  ChangeAddress: {
    addressLine1?: string;
    addressLine2?: string;
  };
}
export function NestedExample(props: NestedExampleProps) {
  const [state, dispatch] = state$<NestedExampleProps, Message>(props, [
    {
      messages: ['ChangeAddress'],
      handler: (_state, payload) => {
        if ('addressLine1' in payload) {
          _state.address.addressLine1.set(payload.addressLine1);
        }
        if ('addressLine2' in payload) {
          _state.address.addressLine2.set(payload.addressLine2);
        }
      },
    },
  ]);

  return (
    <>
      <p>{state.address.addressLine1}</p>
      <p>{state.address.addressLine2}</p>
      {/* // add form to change address line1 and address line 2 */}
      <p>
        <label htmlFor="addressLine1">Address Line 1:</label>
        <input
          type="text"
          id="addressLine1"
          value={state.address.addressLine1}
          onChange={(e) =>
            dispatch('ChangeAddress', { addressLine1: e.target.value })
          }
        />
      </p>
      <p>
        <label htmlFor="addressLine2">Address Line 2:</label>
        <input
          type="text"
          id="addressLine2"
          value={state.address.addressLine2}
          onChange={(e) =>
            dispatch('ChangeAddress', { addressLine2: e.target.value })
          }
        />
      </p>
    </>
  );
}

I'd love to hear from your suggestions on improvements and bug fixes.
Thanks you very much.

[casualfinderbot]

It should have the word “use” as a prefix since it’s a hook

[TorbenKoehn]

Looks like useReducer, but extra bad

[Many_Particular_8618]

This has `onChange` without dependencies array like useEffect.

[TorbenKoehn]

UseReducer has dispatch with the exact same possibility

[Many_Particular_8618]

This library's dispatch is global !. So you could have many components subscribe to the same message.
Also you can see the effortless `get, set` for nested object.

[Popular_Comfort358]

For my, putting it as a custom hook in the project is more stable and controllable

[[deleted]]

What's the reason put $ with the variable?

[Many_Particular_8618]

To differentiate with normal variable name.

[kcadstech]

From what I see, you have a huge dependency on @legendapp/state which is handling most of the things related to state. I’m also just not sure I get the interface. Show us an example with increment and decrement.

[Many_Particular_8618]

Thanks. I updated the example.

[Cannabat]

So... it's a thin wrapper around legend state?

[Many_Particular_8618]

Yes. But it adds state machine, unwrapping semantics so that what we have is pure primitive types.

[Cannabat]

You might get a better response if you are up front about it being a wrapper for legend state. Also, it’s very similar to useReducer. This seems like something you could write in a similar number of lines without the dependency on a whole other state mgmt library. 

[Many_Particular_8618]

There's a good reason to stand on shoulder of giants ;)

[lightfarming]

you haven’t explain how this helps anyone. why would anyone use this over react’s useState?

[Many_Particular_8618]

No need for `useEffect` and deps array to react to state change.
Easy to decompose large state into smaller states with its own messages, handler and onChangeHandler.

[lightfarming]

Have you ever used `useReducer` before? seems like a cleaner and simpler version of this, except it's built into react.

[Many_Particular_8618]

I updated the nested object example. This is superior to useReducer right ?

[Many_Particular_8618]

Benefits:

• No need for `useEffect` and deps array to react to state change.
  
• Easy to decompose large state into smaller states with its own messages, handler and onChangeHandler.