Forem: Rafael De Leon

What con-estado do for your deeply nested React App state?

Rafael De Leon — Tue, 25 Feb 2025 03:13:19 +0000

State management in React can be complex, especially when dealing with deeply nested data structures. Enter con-estado - a powerful state management library that makes handling complex state both elegant and efficient.

Managing state effectively:

import { ChangeEvent } from 'react';
import { useCon, ConStateKeys } from 'con-estado';
// Define your initial state
const initialState = {
  user: {
    name: 'John',
    preferences: {
      theme: 'light' as 'light' | 'dark',
      notifications: {
        email: true,
      },
    },
  },
};

export default function App() {
  const [state, { acts }] = useCon(initialState, {
    acts: ({ set, setWrap }) => ({
      onChangeInput: (
        ev: ChangeEvent<HTMLInputElement | HTMLSelectElement>
      ) => {
        const name = ev.target.name as ConStateKeys<typeof initialState>;
        const value = ev.target.value;
        set(name, value);
      },
      onClickNotifyEmail: setWrap(
        'user.preferences.notifications.email',
        (props) => {
          props.draft = !props.draft;
        }
      ),
    }),
  });

  return (
    <div>
      <h1>Welcome {state.user.name}</h1>
      <input
        type="text"
        name="user.name"
        value={state.user.name}
        onChange={acts.onChangeInput}
      />
      <button onClick={acts.onClickNotifyEmail}>
        Toggle Email Notifications:{' '}
        {state.user.preferences.notifications.email ? 'OFF' : 'ON'}
      </button>
      <select
        value={state.user.preferences.theme}
        name="user.preferences.theme"
        onChange={acts.onChangeInput}
      >
        <option value="light">Light</option>
        <option value="dark">Dark</option>
      </select>
    </div>
  );
}

Direct Path Updates:

Forget about spreading multiple levels deep. con-estado lets you update nested properties using simple dot notation or arrays:

set('user.preferences.theme', 'dark')

Instead of:

setState(prev => ({
  ...prev,
  user: {
    ...prev.user,
    preferences: {
      ...prev.preferences,
      theme: 'dark'
    }
  }
}))

Performance By Design

Built on Mutative (faster than Immer), con-estado ensures:

Only modified portions of state create new references
Prevents unnecessary re-renders through smart subscriptions
Optimized selector-based consumption

Type Safety Without Compromise

Full TypeScript support means:

Strongly inferred state types
Type-safe selectors
Autocomplete for state paths

Real-World Benefits

For Teams

Reduced boilerplate means faster development
Type safety prevents runtime errors
Consistent patterns across the codebase
Easy to understand and maintain

For Performance

Efficient updates to large state trees
Granular re-renders
Optimized subscriptions
Memory efficient

For Developers

Intuitive API
Flexible action creators
Powerful selector system
Great developer experience

When to Choose `con-estado`

con-estado shines when your application has:

Complex nested state structures
Performance-sensitive operations
Frequent partial updates
Need for type safety
Team collaboration

Getting Started

npm i con-estado

The Edge Over Alternatives

While other state management solutions exist, con-estado combines:

The speed of Mutative
The simplicity of dot notation
The power of selectors
The safety of TypeScript

This makes it an excellent choice for modern React applications that need both power and simplicity.

Ready to transform your state management? Con-estado delivers the perfect balance of performance, type safety, and developer experience. Try it in your next project and experience the difference.

Get started with con-estado today

Publishing JSR package with Github Actions that react-hook-use-cta used

Rafael De Leon — Sat, 04 Jan 2025 22:39:56 +0000

JSR

Publishing to Javascript Registry is straightforward.

Sign-in using a github account
Click Publish a package.
- Create a new scope
- Or select an existing scope
Name your new package and create

JSR Package Settings

Make sure you go to your package settings to fill out

description of your package
compatibility. I selected Node and Deno since my package is for consumption

Fill this section out to link your jsr package with your github repo. JSR makes publishing easy through this linking. Better than having to make tokens.

Publish setup

JSR walks you through publishing

You can setup up jsr.json by copying and replacing
@your-scope/your-package to your jsr.json file in the repo root directory

{
  "name": "@your-scope/your-package",
  "version": "0.0.0",
  "license": "MIT",
  "exports": "./src/index.ts"
}

You'll be able to publish through CLI, or github actions. I will be going over how to update via the .github/workflows/publish-package.yml file from the previous article

Github actions

.github/workflows/publish-package.yml should now look like

name: Publish to package registry

on:
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:
    inputs:
      jsr:
        type: boolean
        default: true
        description: publish to JSR
      npm:
        type: boolean
        default: true
        description: publish to npm

  workflow_call:
    inputs:
      jsr:
        type: boolean
        default: true
      npm:
        type: boolean
        default: true

jobs:
  publish:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      id-token: write # The OIDC ID token is used for authentication with JSR.

    steps:
      - name: Checkout repository
        if: ${{ inputs.jsr || inputs.npm }}
        uses: actions/checkout@v4

      - name: Set up Node.js
        if: ${{ inputs.jsr || inputs.npm }}
        uses: actions/setup-node@v4
        with:
          node-version: "lts/*"
          registry-url: 'https://registry.npmjs.org'
          cache: npm

      - name: Restore cache
        if: ${{ inputs.jsr  || inputs.npm  }}
        uses: actions/cache@v4
        with:
          path: |
            ~/.npm
          key: ${{ runner.os }}-publish-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-publish-

      - name: Install npm dependencies
        if: ${{ inputs.jsr  || inputs.npm  }}
        run: npm ci

      - name: Publish to jsr
        if: ${{ inputs.jsr }}
        run: npx jsr publish

      - name: Publish to npm
        if: ${{ inputs.npm  }}
        run: npm publish --provenance --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

I included workflow_dispatch to let you select which to publish in case you need to do them individually from github actions.

workflow_call is also included to let you reuse the workflow. I'll go over how to use this in another article.

Setup JSR versioning

Unless you want to manually update jsr.json, you can use npm version to also update jsr.json using:

util/versioning.cjs

const fs = require( 'node:fs', );

const pkg = require( '../package.json', );
const jsr = require( '../jsr.json', );

jsr.version = pkg.version;

fs.writeFile(
  'jsr.json',
  JSON.stringify(
    jsr,
    null,
    2,
  ),
  {
    encoding: 'utf8',
    flags: 'w',
  },
  ( err, ) => {
    if ( err ) {
      console.error( 'error updating version', err, );
      return;
    }
    console.log( 'jsr.json version updated', );
  },
);

Changes to `package.json`

I am only showing the necessary changes while trying to make it easy to copy and paste.

{
  "scripts": {
    "version": "node util/versioning.cjs && git add jsr.json && npm run build && git add -A dist",
  }
}

jsr.json will now update using the new semver npm will get when you call npm version.

Now you are setup for publishing through Github actions.

The next step is setting up your github pages using nextjs

Publishing NPM package with Github Actions that react-hook-use-cta used

Rafael De Leon — Fri, 03 Jan 2025 18:34:55 +0000

Overview

I will be covering the following:

A little about NPM configuration
Bare minimum package.json
Github Action workflow

NPM

Now that you have your bundle build system, start setting NPM to receive your package.
If you haven't already, please go through the sign-up process via
https://www.npmjs.com/signup
before going any further.

Make sure you enable Multi-factor authentication with TOPT for increase security. This tutorial won't work without it. If you missed this part, you can enable it from your profile page.

https://www.npmjs.com/settings/your-account-name/profile

Init

If you haven't created your package.json already, you can go through the process through npm init

npm init

will ask you questionnaire to fill out before generating the file.

npm init -y

create the file without the questionnaire.

package.json

The following is the bare minimum.
Please replace references to:

your-account/your-package-name with your github repo location
author.name
description
name
keywords with words that help match your package when searched

{
  "author": {
    "name": "Your name"
  },
  "bugs": {
    "url": "https://github.com/your-account/your-package-name/issues"
  },
  "dependencies": {
  },
  "description": "Sweet package",
  "devDependencies": {
    "@parcel/bundler-library": "2.13.3",
    "@parcel/packager-ts": "2.13.3",
    "@parcel/transformer-typescript-types": "2.13.3",
    "@types/node": "22.10.3",
    "@types/react": "19.0.2",
    "parcel": "2.13.3",
    "react": "19.0.0",
    "rimraf": "6.0.1",
    "typescript": "5.7.2"
  },
  "exports": {
    "import": "./dist/esm/index.mjs",
    "require": "./dist/cjs/index.js",
    "types": "./dist/types.d.ts"
  },
  "files": [
    "dist",
    "src"
  ],
  "homepage": "https://github.com/your-account/your-package-name",
  "keywords": [
    "react",
    "typescript"
  ],
  "license": "MIT",
  "name": "your-package-name",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.mjs",
  "peerDependencies": {
    "@types/react": ">= 16.8.0 || >= 17.0.0 || >= 18.0.0 || >= 19.0.0",
    "react": ">= 16.8.0 || >= 17.0.0 || >= 18.0.0 || >= 19.0.0"
  },
  "peerDependenciesMeta": {
    "@types/react": {
      "optional": true
    }
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/your-account/your-package-name.git"
  },
  "sideEffects": false,
  "source": "src/index.ts",
  "types": "dist/types.d.ts",
  "scripts": {
    "build": "rimraf dist && parcel build --log-level verbose",
    "postversion": "git push && git push --follow-tags",
    "version": "npm run build && git add -A dist",
    "version:major": "npm version major",
    "version:minor": "npm version minor",
    "version:patch": "npm version patch",
    "version:prerelease": "npm version prerelease --preid=pre"
  },
  "version": "0.0.0",
}

Most of this is standard, but I want to emphasize

  "files": [
    "dist",
    "src"
  ],

This prevents publishing extra files your package doesn't need include on installation.

In my case, the only files being published are

dist/
src/
LICENSE
README.md
package.json

Note:
src/ probably isn't needed, but I like to include it for reference.

Note Note:

I like to tag my prereleases with --preid=pre, but you can pick something else or not include it.

Setup Notes

There are extras you can include in your setup, such as eslint, husky, test etc., but I don't want to overwhelm this with info. I can post more info separate from here.

Github Actions

There are github actions available from their marketplace, but I want to create a workflow you can manage.

.github/workflows/publish-package.yml

name: Publish to package registry

on:
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

jobs:
  publish:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      id-token: write 

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "lts/*"
          registry-url: 'https://registry.npmjs.org'
          cache: npm

      - name: Restore cache
        uses: actions/cache@v4
        with:
          path: |
            ~/.npm
          key: ${{ runner.os }}-publish-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-publish-

      - name: Install npm dependencies
        run: npm ci

      - name: Publish to npm
        run: npm publish --provenance --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

A key takeaway is --provenance --access public flags.

They are important flags for increase supply-chain security. Without them, this package will not publish from Github.

For more info read Generating provenance statements

NPM_AUTH_TOKEN

https://dev.to/astagi/publish-to-npm-using-github-actions-23fn has a fair explanation on setting up the token. I named the token NPM_AUTH_TOKEN to match env

Finishing up

Commit and push changes to your repo. Now you can see your workflow,

select what branch or tag to publish,

and click Run Workflow

Next, I will include how to publish to Javascript Registry.

Picking a bundler for react-hook-use-cta

Rafael De Leon — Thu, 02 Jan 2025 18:31:31 +0000

Prelude

The main takeaway is going to in installing, setting up package.json and .parcelrc. The rest is just details.

Selecting a bundler

The goal when selecting a bundler was to

have minimal and easy setup
generate files to be consumed by another bundling tool
not have bloated file size

I remembered reading about ParcelJS being good for bundling libraries meant for consumption. Sure enough, it is!

I went through Parcel's doc site to look at what I needed and it boiled down to the following:

Installing dev deps

npm i -DE parcel @parcel/bundler-library @parcel/transformer-typescript-types rimraf

Note:
I like to use -E flag so that packages are installed with the exact version number. I had a past experience where not being exact cause my old team issues with inconsistent package versions being installed on different machines. This isn't really an issue when you commit package-lock.json but I like to be safe.

parcel is the core package.
@parcel/transformer-typescript-types is included for Typescript transpiling files.

The rest of the packages will be explain through out the article.

Changes to package.json

{
  "exports": {
    "import": "./dist/esm/index.mjs",
    "require": "./dist/cjs/index.js",
    "types": "./dist/types.d.ts"
  },
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.mjs",
  "sideEffects": false,
  "source": "src/index.ts",
  "types": "dist/types.d.ts",
  "scripts": {
    "build": "rimraf dist && parcel build --log-level verbose --no-cache"
  }
}

"exports" helps module resolution find the relative path for:

"require" CJS compatible files
"import" modern JS compatible files.
"types" Typescript declarations files.

"source" is for ParcelJS know what file to bundle from.

Output file paths are designated through:

"main" for creating CJS bundle. Content root path to exports.require
"module" for modern bundles. Content root path to exports.import
"types" for Typescript declarations. Content root path to exports.types

"sideEffects": false tells webpack it can aggressively tree shake this package when it bundles it from a webpack project.

scripts.build was setup to call rimraf for removing the dist to ensure clean local builds, even if the folder doesn't exist yet.

With the exception of index.js, index.mjs, and types.d.ts(.map),
ParcelJS generates files with a unique hash that changes based on the file contents, and the filename it's related to. Example, useCTA.ts could generate as useCTA.ae11379d.js. This tells other bundlers caching mechanism to bundle new changes when rebuilding.

.parcelrc

{
  "extends": "@parcel/config-default",
  "bundler": "@parcel/bundler-library"
}

"extends": "@parcel/config-default" is necessary to enable tree-shaking config.

"bundler": "@parcel/bundler-library" enables creating tree-shakable bundle

Start bundling

npm run build

to see what ParcelJS generates in dist folder.

And that's it! Next, I'll go over publishing a library.

🚀 react-hook-use-cta v2 Release! 🚀

Rafael De Leon — Thu, 02 Jan 2025 00:57:39 +0000

The React hook for managing complex state with custom actions, state history tracking, and type safety has been release to the masses.

Along with a brand new documentation website with Codesandbox examples to let you play around with the hook.

Visit https://rafde.github.io/react-hook-use-cta/#intro

Some info on why I started this project.
In order to improve my skillset, I decided to create a little react hook library of a pattern I often created in past React projects. Also, I wanted to challenge my Typescript knowledge, learn how to publish open source packages, and improve on my documentation.

This project helped me learn all of that and then some. The results lead me to want to publish some topics that I hope will help future people looking to create their own open source library. I will make more post on my journey to v2.

In the meantime, maybe react-hook-use-cta v2 can help simplify your React state management.

npm i react-hook-use-cta

yarn add react-hook-use-cta

deno add jsr:@rafde/react-hook-use-cta

Happy New Year!

State management with react-hook-use-cta

Rafael De Leon — Sat, 29 Jun 2024 00:31:23 +0000

How often do you see code that has a lot of useState?:

import { useState } from 'react';

export default function Form() {
  const [firstName, setFirstName] = useState('Taylor');
  const [lastName, setLastName] = useState('Tonkin');
  const [likes, setLikes] = useState('Turtles');
  const [age, setAge] = useState(42);
  const [isAwesome, setIsAwesome] = useState(true);

  return (
    <>
      <input
        name="firstName"
        value={firstName}
        onChange={e => setFirstName(e.target.value)}
      />
      <input
        name="lastName"
        value={lastName}
        onChange={e => setLastName(e.target.value)}
      />
      <input
        name="likes"
        value={likes}
        onChange={e => setLikes(e.target.value)}
      />
      <input
        name="isAwesome"
        value={isAwesome}
        onChange={e => setIsAwesome(e.target.checked)}
        type="checkbox"
      />

      <button onClick={() => setAge((age) => age + 1}>
        Increment age
      </button>
      <button onClick={() => setAge((age) => age - 1}>
        Decrement age
      </button>

      <p>Hello, {firstName} {lastName}.</p>
      <p>You are {age}.</p>
      <p>And you like {likes}.</p>
      <p>{isAwesome ? 'Thanks for being awesome.' : 'You are still awesome.'</p>
    </>
  );
}

You could keep adding more useStates or have useReducer start handling your state.

What if you can consolidate all your useStates in a useReducer like manner?

Try with `react-hook-use-cta`

react-hook-use-cta might be able to help you with that. Check this out:

import { useCTA } from 'react-hook-use-cta';

export default function Form() {
  const [
    state,
    dispatch,
  ] = useCTA({
    initial: {
      firstName: 'Taylor',
      lastName: 'Tonkin',
      likes: 'Turtles',
      age: 42,
      isAwesome: true,
    }
  });

  return (
    <>
      <input
        name="firstName"
        value={state.firstName}
        onChange={e => dispatch.cta.update(
          'firstName',
          e.target.value
        )}
      />
      <input
        name="lastName"
        value={state.lastName}
        onChange={e => dispatch.cta.update(
          'lastName',
          e.target.value
        )}
      />
      <input
        name="likes"
        value={state.likes}
        onChange={e => dispatch.cta.update(
          'likes',
          e.target.value
        )}
      />
      <input
        name="isAwesome"
        value={state.isAwesome}
        onChange={e => dispatch.cta.update(
          'isAwesome',
          e.target.checked
        )}
        type="checkbox"
      />

      <button onClick={() => dispatch.cta.update(({current}) => ({ age: current.age + 1})}>
        Increment age
      </button>
      <button onClick={() => dispatch.cta.update(({current}) =>({ age: current.age - 1})}>
        Decrement age
      </button>

      <p>Hello, {state.firstName} {state.lastName}.</p>
      <p>You are {state.age}.</p>
      <p>And you like {state.likes}.</p>
      <p>{state.isAwesome ? 'Thanks for being awesome.' : 'You are still awesome.'</p>
    </>
  );
}

useCTA comes with an update action to merge updates to the state.
It also accepts a callback for accessing current state so you don't have to rely on closure.

Custom actions

Maybe you want to clean up a bit:

import { useCTA } from 'react-hook-use-cta';

export default function Form() {
  const [
    state,
    dispatch,
  ] = useCTA({
    initial: {
      firstName: 'Taylor',
      lastName: 'Tonkin',
      likes: 'Turtles',
      age: 42,
      isAwesome: true,
    },
    actions: {
      onChangeText(ctaState, event) {
         return {
           [event.target.name]: event.target.value,
         };
      },
      onChangeCheckbox(ctaState, event) {
         return {
           [event.target.name]: event.target.checked,
         };
      },
      incrementAge(ctaState) {
         return {
           age: ctaState.current.age + 1,
         };
      },
      decrementAge(ctaState) {
         return {
           age: ctaState.current.age - 1, 
         };
      },
    }
  });

  return (
    <>
      <input
        name="firstName"
        value={state.firstName}
        onChange={dispatch.cta.onChangeText}
      />
      <input
        name="lastName"
        value={state.lastName}
        onChange={dispatch.cta.onChangeText}
      />
      <input
        name="likes"
        value={state.likes}
        onChange={dispatch.cta.onChangeText}
      />
      <input
        name="isAwesome"
        value={state.isAwesome}
        onChange={dispatch.cta.onChangeCheckbox}
        type="checkbox"
      />

      <button onClick={dispatch.cta.incrementAge}>
        Increment age
      </button>
      <button onClick={dispatch.cta.decrementAge}>
        Decrement age
      </button>

      <p>Hello, {state.firstName} {state.lastName}.</p>
      <p>You are {state.age}.</p>
      <p>And you like {state.likes}.</p>
      <p>{state.isAwesome ? 'Thanks for being awesome.' : 'You are still awesome.'</p>
    </>
  );
}

With custom actions, you can let action handlers take care of reading events or handle specific changes.

These are some small examples of what react-hook-use-cta can do. I haven't even pointed out how you can use createCTAContext for global state management.

Would you like to know more? Visit https://github.com/rafde/react-hook-use-cta

or leave a comment.

Thanks for reading.

Prelude to react-hook-use-cta (useCTA)

Rafael De Leon — Thu, 14 Mar 2024 20:57:14 +0000

Introduction

In the past, I found myself writing a React.useReducer hook that did common patterns of updating, setting, or comparing my current state with previous or initial state. Instead of having to rewrite this hook everywhere I went, I decided to turn it into a hook library in case I needed it in other projects.

It's current version is in prerelease version 0.0.1 since I think the Typescript and some of the API could be improved.

I provided extensive documentation on the hook's API in the README.md and provided a Demo playground for people to see the hook in action.

I did what I could to help intelli-sense through Typescript when it comes to defining custom actions and dispatch parameters.

I want to send this out into the wild to see if it helps and get some input. Thanks for reading.

Forem: Rafael De Leon

What con-estado do for your deeply nested React App state?

Managing state effectively:

Direct Path Updates:

Performance By Design

Type Safety Without Compromise

Real-World Benefits

For Teams

For Performance

For Developers

When to Choose con-estado

Getting Started

The Edge Over Alternatives

Publishing JSR package with Github Actions that react-hook-use-cta used

JSR

JSR Package Settings

Publish setup

Github actions

Setup JSR versioning

Changes to package.json

Publishing NPM package with Github Actions that react-hook-use-cta used

Overview

NPM

Init

package.json

Setup Notes

Github Actions

NPM_AUTH_TOKEN

Finishing up

Picking a bundler for react-hook-use-cta

Prelude

Selecting a bundler

Installing dev deps

Changes to package.json

.parcelrc

Start bundling

🚀 react-hook-use-cta v2 Release! 🚀

State management with react-hook-use-cta

Try with react-hook-use-cta

Custom actions

Prelude to react-hook-use-cta (useCTA)

Introduction

When to Choose `con-estado`

Changes to `package.json`

Try with `react-hook-use-cta`