React forgot to add something.

Sarath Mohan — Mon, 28 Sep 2026 05:21:43 +0000

It is a simple and humble Global state management.
I know, Now you are thinking "Why not React context or any others?". The answer is simple. People cannot use something which has less render control and difficult to use, React knows it and that's exactly the reason they say this

Thats why Redux still wins. But I really hate boilerplate code. Did RTK solved it? sorry, not for me . And, all other libraries make us write a lot of code. Mobx I liked, but decorators and multi store makes it tough.

To put it simple, Why don't I make a normal object , make it reactive and control the render to value level. yes, if one value changes, that value subscriptions(only) will render, nothing else.

So I created native-state-react, uses just a couple of react hooks and just a single file. The entire library is a single file. React should have done this before.

The project started as an experiment to simplify the state and data, reduce boilerplate compared to Redux or Context API and a simple and local state feel for developers, while still offering predictable and scalable state handling. It means a lot coz philosophy of keeping React development closer to its native feel — minimal abstractions, maximum clarity.

Here is the github link to the project. See benchmark .

Renders has been optimized to the extended levels available in eventloop engine.

Pre-compiled path getters (compileGetter): Replaced slow loop-based object property drilldowns with optimized, static depth getter functions, avoiding array allocations and loop overhead on every render cycle.

Path-targeted subscriptions: Replaced the global subscriber set with a Map of paths to sets of listener callbacks. This ensures that updates to one slice of state only notify relevant subscribers, achieving $O(1)$ lookup for exact selector matches and avoiding unnecessary calculations for unrelated subscribers.

Microtask notification batching (queueMicrotask): Implemented batched notifications so that rapid successive state updates (e.g. synchronous update loops) queue callbacks and trigger component updates/re-renders exactly once at the end of the tick.

Demo

You can explore the package native-state-react on npm. A demo is available in Stack blitz. The repo includes usage examples showing how to define state, update it, and consume it across components without complex setup.

Usage

Wrap your app with the <Root> component at the top level, optionally providing the initial state.
Use useNativeState in your components to read and update global state.

Use it almost like useState .. see below

in your component:

import { useNativeState } from 'native-state-react';

function App() {
  const [name, setName] = useNativeState('s.name', 'Andrew');

  const updateName = () => {
    setName("George");
  };

  return (
    <div>
      <p>Name: {name}</p>
      <button onClick={updateName}>Update Name</button>
    </div>
  );

}

See running Demo Here

API

<Root>

The root component that initializes the global state store.

Props: initial: (optional) Object - The initial state. Defaults to an empty object {}.

children: (optional) React Nodes - Children to render inside .

useNativeState(pathString, initialVal)

Hook to read and write a specific slice of the global state using string path notation.

pathString: String - The path to select in the global state, starting with 'state' or 's' (e.g. 's.name', 'state.school.class', 's.todos[0].title', 'state.school.class.student[21]').

initialVal: (optional) Any - The value to initialize in the pathString. Note that if pathString is already initialized or has value set, it will NOT be updated/initilized again, you may cal set method to update the value.

Returns: [value, setValue]

value: The current value at the specified path.

setValue: Function to update the value of this specific path.

[!WARNING]

if pathString is s.todos[0].title , s.todos[0] must exist in the global state so that it can retrieve/set title

useNativeSelector(selectorFunction)

A highly optimized read-only hook that subscribes to state slices. Components using this hook will re-render only when the selected slice changes. Internally utilizes React's modern useSyncExternalStore for tear-free rendering.

selectorFunction: Function - A function that accepts the state and returns the selected slice (e.g. s => s.name).

Returns: value

value: The read-only value of the selected state slice.

BENCHMARK

Code used to run benchmark can be found in benchmarks folder .

Native Global State: : Simplifying State Management the Native Way

Sarath Mohan — Thu, 04 Jun 2026 10:06:55 +0000

This is a submission for the GitHub Finish-Up-A-Thon Challenge

What I Built

I built native-state-react, a lightweight state management library for React that focuses on performance, simplicity and native patterns. The project started as an experiment to improve performance, reduce boilerplate compared to Redux or Context API and a simple and local state feel for developers, while still offering predictable and scalable state handling. It means a lot to me because it represents my philosophy of keeping React development closer to its native feel — minimal abstractions, maximum clarity.

I put maximum efforts on this, and it has even optimized to these levels

Pre-compiled path getters (compileGetter): Replaced slow loop-based object property drilldowns with optimized, static depth getter functions, avoiding array allocations and loop overhead on every render cycle.

Path-targeted subscriptions: Replaced the global subscriber set with a Map of paths to sets of listener callbacks. This ensures that updates to one slice of state only notify relevant subscribers, achieving $O(1)$ lookup for exact selector matches and avoiding unnecessary calculations for unrelated subscribers.

Microtask notification batching (queueMicrotask): Implemented batched notifications so that rapid successive state updates (e.g. synchronous update loops) queue callbacks and trigger component updates/re-renders exactly once at the end of the tick.

Demo

You can explore the package here: native-state-react on npm. A demo is added using Stack blits here https://stackblitz.com/edit/native-state-react?file=src%2FApp.jsx . The repo includes usage examples showing how to define state, update it, and consume it across components without complex setup.

import { useNativeState } from "native-state-react";

function Counter() {
  const [count, setCount] = useNativeState("state.count",0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

This simple snippet demonstrates how intuitive it is to manage state with the library.

I have even did a benchmark comparing it to famous redux library. Results were impressive (even to my surprise)

Here is the benchmark code :
https://github.com/sarath263/native-state/tree/main/benchmark

The Comeback Story

Originally, the project was just a rough prototype with limited functionality. It lacked features(single hook and no native feel), documentation, examples, and polish. For this challenge, I revisited it, cleaned up the API, improved code support, and added clear usage guides. I also fixed edge cases around state updates and optimized performance for larger applications. Now, it’s ready for developers to adopt without friction.

My Experience with GitHub Copilot

GitHub Copilot was a huge help in finishing this project. It assisted me in:

Generating many of the code quickly. Speed up my development.
Suggesting options that improved developer experience.
Helping with documentation drafts and example snippets.
Speeding up repetitive tasks so I could focus on architectural design decisions.

Copilot felt like a coding partner that nudged me toward cleaner solutions and helped me finish what I had started months ago.

DEV Community: Sarath Mohan

React forgot to add something.

Native Global State: : Simplifying State Management the Native Way

What I Built

Demo

The Comeback Story

My Experience with GitHub Copilot