DEV Community: Slava Birch

Greetings! Remini - Effective state management in React 🌴

Slava Birch — Tue, 09 Aug 2022 13:02:37 +0000

➪ Easy to learn
➪ Small and quick
➪ For any scale apps

Your coding time saver!

Minimal, well-structured, and flexible codebase save a lot of developer time for maintaining and growth your React applications.

How it works

Usually, when you just start React project or have a very small one, your codebase is short, understandable, and simple, you can easily google examples of common issues.

But as you write the business logic of your application, the code gets larger and it becomes more and more difficult to understand the abundance of files, tricks and code pieces.

You should clearly understand where is a place for your logic, and how you can write as much code as you want without reducing your application maintenance.

How to make a simple React application that can easily upscale to a large application by business demand
How to organize your code clean with minimal states and conveniently separated logic
How to speed up your application and reduce boilerplate

My answer is Remini 😍

Get started

At first, you have a state 😊

const $user = box({ email: 'a@x.com' })
const $enabled = box(true)
const $counter = box(42)
const $books = box([ 'The Little Prince', 'Alice in Wonderland' ])

At second, bind state to React component!

const Books = () => {
  const books = useBox($books)
  return <ul>
    {books.map(book => <li>{book}</li>)}
  </ul>
}

At third, update the state 👍

const BookForm = () => {
  const [name, setName] = React.useState('')
  return <p>
    <input 
      value={name}
      onChange={event => setName(event.target.value)} 
      />
    <button
      onClick={() => update($books, books => [...books, name])}
      >Add</button>
  </p>
}

At fourth, share your logic 😉

// ./books.shared.js
export const $books = box([])
export const $loading = box(false)

export const load = async () => {
  write($loading, true)

  const response = await fetch('https://example.com/api/books')
  const books = await response.json()

  write($books, books)
  write($loading, false)
}

const BooksLoad = () => {
  const loading = useBox($loading)
  return <p>
    {loading ? 'Loading...' : (
      <button onClick={load}>Load</button>
    )}
  </p>
}

Multiple stores vs single store

One of the manifestations is the multiple-store architecture. The main reason is the independent modules decomposition. For flexible growth, you should separate your code. Your app should be built on top of separated modules composition. There is each module contains some data and logic.

It’s a very good architecture decision because you can develop and test each module separately. You can easily reuse modules between projects. And when you use a lazy load for some parts of your app, you will never have any problem with it, just import it and use it. It should be simple!

Ok. The first one is the separated module decomposition, and what's the next?

If each module has its own state and logic it is very convenient to use separate stores to control data flow.

At that moment the good time to make the postulate: each store should be simple, and never recommend to make deeply nested state. The better way is following to KISS principle.

Selection from store

One of the most frequently used functions during work with the state is the selection. Selection is the transformation of your state, fairly for performance reasons. You should update your view components only when updated the data used inside. This is the rendering optimization.

For example, your user state is big it has a lot of user settings and some stuff. If you have an avatar view component, it should be updated only when the avatar changes, not for each user state update.

import { box, select } from 'remini'

const $user = box({
  name: 'Joe',
  email: 'a@x.com',
  settings: {},
  avatar: 'https://avatar.com/1.jpg'
})

const $avatar = select($user, user => user.avatar)

import { useBox } from 'remini/react'

const Avatar = () => {
  const avatar = useBox($avatar)
  return (
    <img src={avatar} />
  )
}

You can see how it’s easy to make that tiny, but very effective optimization!

You don't have to render everything. You should render only what you need! No more, no less)

Composition of stores

Step by step on the application growing upstairs you will have cases of the necessary combination of multiple stores to one. It should be simple)

import { box, read, wrap } from 'remini'

const $firstName = box('John')
const $lastName = box('Doe')

const $fullName = wrap(() => {
  return read($firstName) + ' ' + read($lastName)
})

Here we combine several stores into one for convenient use in some view components.

References

Install

npm install remini
# or
yarn add remini

Enjoy your code!

Github: https://github.com/re-js/remini
Npm: https://www.npmjs.com/package/remini

State manager of dream

Slava Birch — Wed, 07 Jul 2021 14:00:12 +0000

Some time ago during one of my interviews, a potential employer asked me to describe a perfect frontend framework in my wildest dreams. I gave quite a thorough answer explaining how it works, and realized that it actually was a description vaguely resembling the synthesis of React and Angular. My dream was born at that moment!

Currently, when it comes to all existing frontend frameworks, those widely popular or not, I prefer React since it has a beautiful integration with the typescript. Using JSX as part of a language is really convenient. It offers a lightweight version with perfect compatibility (4 kB Preact instead of 30), with the possibility to inject it on the Webpack level without changes to your codebase. And React is simply a view system without any special solution builder, application architecture, or advanced state management control. That is just awesome!

As for the organization of application logic, if we don’t find it in React we can choose one of the existing solutions.

Redux has the most powerful community in that field. A big set of trusted community-based components are provided to develop a lot of popular types of applications for topical business issues. It enables you to have both a quick start and a quick make.

Action, Store, and Selector are just great to add an abstraction layer and allow you to define a way to control your state.
Actions can be possible to use everywhere in your app, the subscription with sagas provides a great mechanism for listening to your app’s actions and reacting to them.
The immutable state in the store makes your app free from a proxy-based data transformation, and provides a very easy and understandable modification for both simple and nested states.
And selectors that cache parts of your state for performance reasons are useful a lot as well.

As far as more customizable reactivity goes, the desirable functions are either the possibility to subscribe to selector changes, or description of several stores for modular decomposition. Other options are that you probably want to code the view component local logic in the same way as to control your global app's store, or you want to manage the reactive state that contains not only plain javascript objects and arrays.

Once similar thoughts have already come to Mobx. This is a totally different way to organize your application logic.
Decomposition of your business issues using the object-oriented technique is a great decision for people who have knowledge in that field. Subscription to the result changes of of any combinations of values and selectors is really convenient.
Great modular decomposition and transparent reactive programming both sound awesome.

And on the testy is the streaming programming there is a beautiful pattern that has Rx as the most popular implementation. It offers a declarative way to coding your app’s actions as chaining configurable objects of reactive streams. It is a perfect instrument for event management.

Well, in such a way, we can take the most appealing state control techniques, and use them however we want.

And as a cherry on the cake, I like one more technique which is a shared stateful logic decomposition. Angular implemented it as the service on dependency injection.

All of the above-mentioned ideas inspired me to combine such really progressive techniques into one implementation for playing it together!

Stores, actions, selectors, object-oriented support, imperative and declarative styles, reactive streams, and stateful logic availability scopes - all in one, my dream implemented in Realar state manager. This is my pride and result of long, deep, and happy work.

My work is not only techniques connected together, I have reached an incredibly small size with this functionality. I used a special style of the code, which achieves the maximum compression of the minified code. 5 kB for all It’s a real success story! With Preact you can get a modern frontend environment by 10kB bundle size for all you need)

I’m happy after tons of deep coding hours, happy that I can share. Achievement is unlocked))))

Already in production on the Card of the Day react native app 👍

I’m looking for a sponsor because my hands have already been burning from continuing development non-stop! I want to make a beautiful form framework and a streams framework for nodes, with core on Realar. I would like to start recording teaching videos about all actual questions on the modern frontend field. And I dream of writing an open book. If you know any methods for searching sponsors, or if some of your friends know something, I urge you to tell me in the comments. It will be your great contribution to make a better world!

Thanks a lot for your attention, and
Happy coding!

realar-project / realar

5 kB Advanced state manager for React

Realar

Realar state manager targeted to all scale applications up to complex enterprise solutions on a modular architecture. And has an incredible small size 5 kB for all you need.

Usage

You can make stores and "actions" ^{play on runkit}

const store = value(0)

const add = store.updater((state, num: number) => state + num)
const inc = store.updater(state => state + 1)

And bind to React easily ^{play on codesandbox}

const App = () => {
  const state = useValue(store)

  return <p>{state}
    <button onClick={inc}>+</button>
  </p>
}

You can make streams ^{play on runkit}

const addendum = value('0')
  .pre((ev: ChangeEvent<HTMLInputElement>

…

View on GitHub

Multiparadigm state manager for React by ~2 kB.

Slava Birch — Thu, 04 Feb 2021 16:27:31 +0000

Realar multiparadigm state manager for React based on reactive mathematic.

Light, Fast, and Pretty looked 😘

Targeted to clean code, modulable architecture, and time of delivery user experience.

Supported two kinds of data and logic definitions.

Plain functional reactive programming with only functions

const [getCount, set] = box(0);

const tick = () => set(getCount() + 1);
setInterval(tick, 200);

const App = () => {
  const count = useValue(getCount);
  return (
    <p>{count}</p>
  )
}

Try on CodeSandbox

And transparent functional reactive programming with classes, decorators and jsx wrapper

class Ticker {
  @prop count = 0
  tick = () => ++this.count;
}

const ticker = new Ticker();
setInterval(ticker.tick, 200);

const App = () => (
  <p>{ticker.count}</p>
)

Try wrapped version on CodeSandbox

Realar targeted to all scale applications up to complex enterprise solutions on microfrontends architecture.

You can use as many from Realar as you want. For small websites or theme switchers, two functions are enough👌 Step by step on applications scale stairs you can take more and more. From sharing state to all application parts, to modulable architecture with apps composition.

I made my choice!

Reuse React hooks in state sharing

Slava Birch — Thu, 21 Jan 2021 11:45:15 +0000

Hi guys, today I'm going to talk about how to complete your code with one hook that will complete the puzzle!

The release of React 16.8 was a gift and a blessing, hooks were a great tool for managing the state of components. And having met with amicability, the community began to create new hooks based on standard ones for asynchronous operations, for interacting with external logic, and many many others.

Hooks let you use state and other React features without writing a class.
You can also build your own Hooks to share reusable stateful logic between components. (React website)

But (I'm sure) it became a chagrin for everyone that hooks can only store data at the component level. And therefore components can share their state only with children.

And that's the problem.

We have enough hooks to describe any logic, but there is no way to use their state together between a group of unrelated components.

You can see that Recoil, Redux, MobX, and the standard React hooks do the same thing - managing reactive state.
But why do we need to use in our applications a way of describing logic on hooks in components and on an external application state management system?

I suggest you try the simplest way to share the state described in hooks with other unrelated components on the page.

useBetween

And this is just one hook, with the only one call argument - a custom hook, the result of which will be shared by everyone.

For example, let's describe a custom hook that supplies a hash from the browser's address bar. The hook subscribes to changes to the browser hash through the window event.

// router.shared.ts
import { useState, useCallback, useEffect } from "react";
import { useBetween } from "use-between";

const useRouter = () => {
  const [hash, setHash] = useState("");

  const syncHash = useCallback(() => {
    setHash(window.location.hash);
  }, [setHash]);

  useEffect(() => {
    syncHash();
    window.addEventListener("hashchange", syncHash);
    return () => {
      window.removeEventListener("hashchange", syncHash);
    };
  }, [syncHash]);

  return {
    hash
  };
};

export const useSharedRouter = () => useBetween(useRouter);

In the last line of the example, we used a call to useBetween passing a custom useRouter hook as an argument, and thus created a new useSharedRouter hook - a shared router for all components that will use it.

const Hash = () => {
  const { hash } = useSharedRouter();
  return (
    <p>Location hash: {hash}</p>
  )
}

export const App = () => (
  <>
    <Hash />
    <Hash />
    <Hash />

    <a href="#hash-1">hash-1</a>
    <a href="#hash-2">hash-2</a>
  </>
)

In this example, the router will be created once and will be used for all the Hash components. Every time the hash of the navigation bar address changes, all components using useSharedRouter will be updated!

We used the standard React hooks that are familiar and understandable to everyone to create a shared state between any components using just one external hook useBetween.

Everything will be installed simply npm i use-between and you can use and enjoy, and for my taste, the easiest way to share the state in React!

If you like this idea and would like to use it, please put star in github. It will be your first contribution!

betula / use-between

Sharing state between React components

use-between

When you want to separate your React hooks between several components it's can be very difficult, because all context data stored in React component function area If you want to share some of state parts or control functions to another component your need pass It thought React component props. But If you want to share It with sibling one level components or a set of scattered components, you will be frustrated.

useBetween hook is the solution to your problem 😚

import React, { useState, useCallback } from 'react';
import { useBetween } from 'use-between';
const useCounter = () => {
  const [count, setCount] = useState(0);
  const inc = useCallback(() => setCount(c => c + 1), []);
  const dec = useCallback(() => setCount(c

…

View on GitHub

The light decision for React state 👋

Slava Birch — Mon, 11 Jan 2021 10:37:22 +0000

Reactive state manager for React by 1.34 kilobytes (based on reactive-box).

Light, Fast, and Pretty looked 😘

Realar targeted to clean code, minimal abstraction, minimal additional functions, modulable architecture, and time of delivery user experience.

You can start development with knows only two functions 😉

box. Reactive value marker. Each reactive value has an immutable state. If the immutable state will update, all React components that depend on It will refresh.

shared. One of the primary reasons for using state manager in your application is a shared state accessing, and using shared logic between scattered React components and any place of your code.

import React from 'react';
import { box, shared } from 'realar';

class Counter {
  @box value = 0;

  inc = () => this.value += 1;
  dec = () => this.value -= 1;
}

const sharedCounter = () => shared(Counter);

const Count = () => {
  const { value } = sharedCounter();
  return <p>{value}</p>;
};

const Buttons = () => {
  const { inc, dec } = sharedCounter();
  return (
    <>
      <button onClick={inc}>+</button>
      <button onClick={dec}>-</button>
    </>
  );
};

const App = () => (
  <>
    <Count />
    <Buttons />
    <Count />
    <Buttons />
  </>
);

export default App;

For best possibilities use realar babel plugin, your code will be so beautiful to look like. See wrapped version on CodeSandbox.

The next set of possibilities I will enlighten in the future article!😌

Realar Github link.

From the author

Hello everyone who read me! One year ago I decide that Open Source is a necessary part of my Ikigai and I serve by that day.

I was deep research in React applications state management, more than one year of coding under that, a lot of versions different syntax constructions.., but as result, I took best from exists and packed to minimal performant code 😊

I will be happy to receive your opinion and thoughts about its library! And what you think, can it help people make their code feeling better?

664 Bytes reactivity

Slava Birch — Thu, 26 Nov 2020 08:06:33 +0000

Minimalistic, fast, and highly efficient reactivity.

Hi friends! Today I will tell you how I came to this.

Redux has so many different functions, Mobx has mutable objects by default, Angular so heavy, Vue so strange, and other them so young 😅

These funny thoughts served as fuel for writing the reaction core. So that everyone can make their own syntax for managing the state of the application in 100-150 lines 👍

It only three functions:

box - is the container for an immutable value.
sel - is the cached selector (or computed value in another terminology) who will mark for recalculating If some of read inside boxes or selectors changed.
expr - is the expression who detects all boxes and selectors read inside and reacted If some of them changed.

import { box, sel, expr } import "reactive-box";

const [get, set] = box(0);
const [next] = sel(() => get() + 1);
const [run, stop] = expr(() => {
    console.log(`Counter: ${get()} (next value: ${next()})`)
});
run();
set(get() + 1);

Try on RunKit!

Basic examples:

It is minimal core for a big family of state managers' syntax. You can use the different syntax of your data flow on one big project, but the single core of your reactions provides the possibility for easy synchronization between them.

Examples of state managers' syntax:

Install

npm i reactive-box

Thank you for your time!

See reactive-box repository on Github

My beloved React micro frontends 😍

Slava Birch — Wed, 24 Jun 2020 05:42:33 +0000

Perfect usage 👍 on codesandbox

import React from "react";
import { unit, useUnit } from "realar";

const Ticker = unit({
  current: 0,
  after: 2,
  get next() {
    return this.current + 1;
  },
  tick() {
    this.current += 1;
  },
  synchronize() {
    this.after = this.next + 1;
  }
});

export default function App() {
  const { current, next, after, tick } = useUnit(Ticker);
  return (
    <>
      <h1>Realar ticker</h1>
      <p>Current: {current}</p>
      <p>Next: {next}</p>
      <p>After: {after}</p>
      <p>
        <button onClick={tick}>tick</button>
      </p>
    </>
  );
}

Crazy usage 😜 on codesandbox

import React from "react";
import {
  unit,
  useService,
  changed,
  service,
  action,
  inst,
  chan,
  useUnit,
  Zone,
  Service
} from "realar";

const MaxBoost = action();
const GetUser = chan();

const Config = unit({
  step: 1,
  inc() {
    this.step += 1;
  },
  [MaxBoost]() {
    console.log("x10 speed!", this.step);
    this.step *= 10;
  }
});

const Ticker = unit({
  config: service(Config),
  om: inst(Config),
  after: 0,
  current: 0,
  get next() {
    return this.current + this.step;
  },
  get step() {
    return this.config.step;
  },
  tick() {
    this.current += this.step;
  },
  construct() {},
  destruct() {},
  synchronize() {
    this.after = this.next + this.step;
    if (changed(this.after > 4)) console.log("Fire!");
    if (changed(this.after > 10)) {
      MaxBoost();
    }
  }
});

const BackendFF = unit({
  async [GetUser](id) {
    return await new Promise(r => setTimeout(() => r("John Doe " + id), 1000));
  }
});

const User = unit({
  user: "not loaded",
  concurrent: 0,
  get loading() {
    return this.concurrent > 0;
  },
  async load() {
    this.concurrent++;
    this.user = await GetUser(1);
    this.concurrent--;
  }
});

function App() {
  const { current, next, tick, step } = useService(Ticker);
  const {
    after,
    config: { inc },
    om: { step: om_step }
  } = useService(Ticker);
  const { user, load, loading } = useUnit(User);
  return (
    <div>
      <h1>Realar ticker</h1>
      <p>Current: {current}</p>
      <p>Next: {next}</p>
      <p>After: {after}</p>
      <button onClick={tick}>tick</button>
      <p>Step: {step}</p>
      <button onClick={inc}>inc</button>
      <p>Om: {om_step}</p>
      <p>User: {loading ? "loading..." : user}</p>
      <button onClick={load}>load</button>
      <Service unit={BackendFF} root />
    </div>
  );
}

export default function Root() {
  return (
    <>
      <Zone>
        <App />
      </Zone>
      <Zone>
        <App />
      </Zone>
    </>
  );
}

betula/realar on github

Sharing React hooks stateful logic between components

Slava Birch — Tue, 26 May 2020 12:11:15 +0000

When you want to separate your React hooks between several components it's can be very difficult, because all context data stored in React component function area. If you want to share some of state parts or control functions to another component your need pass It thought React component props. But If you want to share It with sibling one level components or a set of scattered components, you will be frustrated.

useBetween hook is the solution to your problem 😚

// App.jsx
import React, { useState, useCallback } from 'react';
import { useBetween } from 'use-between';

const useCounterStore = () => {
  const [count, setCount] = useState(0);
  const inc = useCallback(() => setCount(c => c + 1), []);
  const dec = useCallback(() => setCount(c => c - 1), []);
  return {
    count,
    inc,
    dec
  };
};

const Count = () => {
  const { count } = useBetween(useCounterStore);
  return <p>{count}</p>;
};

const Buttons = () => {
  const { inc, dec } = useBetween(useCounterStore);
  return (
    <>
      <button onClick={inc}>+</button>
      <button onClick={dec}>-</button>
    </>
  );
};

const App = () => (
  <>
    <Count />
    <Buttons />
    <Count />
    <Buttons />
  </>
);

export default App;

useBetween is a way to call any hook. But so that the state will not be stored in the React component. For the same hook, the result of the call will be the same. So we can call one hook in different components and work together on one state. When updating the shared state, each component using it will be updated too.

If you like this idea and would like to use it, please put star in github. It will be your first contribution!

betula / use-between

Sharing state between React components

use-between

useBetween hook is the solution to your problem 😚

import React, { useState, useCallback } from 'react';
import { useBetween } from 'use-between';
const useCounter = () => {
  const [count, setCount] = useState(0);
  const inc = useCallback(() => setCount(c => c + 1), []);
  const dec = useCallback(() => setCount(c

…

View on GitHub

Answer: Is it possible to share states between components using the useState() hook in React?

Slava Birch — Tue, 26 May 2020 12:00:56 +0000

May 26 '20

This is possible using the useBetween hook.

See in codesandbox

import React, { useState } from 'react'
import { useBetween } from 'use-between';

const useShareableState = () => {
  const [username, setUsername] = useState('Abrar');
  const [count, setCount] = useState(0);
  return {
    username,
    setUsername,
    count,
    setCount
  }
}


const HookComponent =

…

Open Full Answer