Close your eyes. Quiet your mind. Listen to the sound of a single leaf falling.

Kuji is a mindfulness app that weaves the ancient tradition of Japanese shrine fortune-drawing with modern AI-powered emotional wellness.

Amid the noise of everyday life, we’ve built you a quiet tearoom — warm, hand-drawn illustrations and a timeless Zen aesthetic to accompany every morning and evening of your year.

Link: https://apps.apple.com/app/id6758899526

Introducing Arc Stage — a Chrome extension inspired by Arc, designed to bring the sleek, focused, and beautiful experience of Arc to your good old Chrome browser.

🌈 What Is Arc Stage?

Arc Stage gives you a Arc experience without leaving Chrome, just install a extension, that’s all.

→ Get Arc Stage on the Chrome Web Store

Here’s what it brings:

✅ A Customizable Arc-like Background

Set the vibe with a global background that makes every new tab feel like your space.

✅ A Smart Dock for Quick Access

Open tabs, bookmarks, and quick links — all from a minimal dock that’s just one click (or shortcut) away.

✅ Beautifully Redesigned Tabs, Bookmarks, etc.

Arc Stage simplifies tab and bookmark access in a way that feels modern, fluid, and… just better.

🧠 Why Use Arc Stage?

Let’s be honest: most of us use Chrome because it just works. But it can also feel, well, boring. Arc Stage adds just the right amount of flair and focus without asking you to change your habits or re-learn a new browser.

It’s Chrome, but elevated.

It’s your workspace, but more you.

It’s functional, aesthetic, and refreshingly fun.

✨ Try It Today

If you’ve ever been Arc-curious, or just want your Chrome to feel a little less… Chrome-y — give Arc Stage a spin. It takes 10 seconds to install, and your browsing experience might just never be the same again.

→ Get Arc Stage on the Chrome Web Store

Built for people who love focus, style, and simplicity.

Welcome to a better-looking Chrome.

In recent times, the trend of personalizing your online presence has taken the internet by storm.

Whether you’re a young student or a seasoned professional, having a unique online space to share your interests, hobbies, and achievements is becoming increasingly popular.

One of the easiest and most fun ways to create your own personal webpage is by using a service called “kee.so”.

In this article, we’ll guide you through simple steps on how to set up your very own bento page using kee.so. This guide is specifically designed for young readers, so it’s super easy to understand!

Step 1: Sign Up for kee.so

The first step in creating your bento page is to sign up for an account on kee.so. It’s free and straightforward.

Go to kee.so website, you’ll see a input box after “kee.so/”, to make it easy for others to find your bento page, you can choose a address that includes your name or a word that represents you, fill it in “yourname”.

Then click the “Launch →” button, and you’ll be guided through the registration process.

Make sure to choose a password you can remember easily. Enter you Email and receive the verification code to finish sign up successfully.

Step 2: Add Your Content

Once you’re logged in, you’ll see a pop-up to fill in the social accounts you have. You can quickly initialize your page.

Now comes the fun part — adding your content!

Think of your bento page as a digital scrapbook. From the left panel, you can choose to add text, images, and links to your favorite websites.

Share your favorite hobbies, books, music, and anything else you love. Hove on the grid and click on the edit icon button, you can change it anytime.

Step 3: Customize Your Page

kee.so offers various colorful and fun options for background and text on the right panel.

Find the one that best represents your personality and style. Don’t worry, you can always change it later if you change your mind!

Step 4: Publish Your Page

When you’re happy with how your bento page looks and what you’ve added, it’s time to publish it.

Click the “Publish” button on the top right corner(It’s only clickable when the page changes!), and voilà! Your personal bento page is now live on the internet for others to see.

Step 5: Share with Friends and Family

Click on the share bar at the bottom of the left panel, share the link of your bento page with your friends and family.

They’ll love seeing what you’ve created. You can send it through email, share it on social media(Tweet it!), or even print it out and show it to them in person!

Creating your bento page with kee.so is a fantastic way to express yourself and share your interests with the world.

Remember, you can update and change your page whenever you want, so have fun and get creative.

Happy bento page building, young creators!

Product Hunt: https://www.producthunt.com/posts/react-live-island

GitHub: https://github.com/nanxiaobei/react-live-island

import LiveIsland from 'react-live-island';

const Demo = () => {
  return (
    <LiveIsland>
      {(isSmall) => (isSmall ? 'small' : 'large')}
    </LiveIsland>
  );
};

I searched the entire internet but couldn’t find a suitable ⚛️ React Dynamic Island 🏝 component, so I decided to create one myself.

It is a very simple component that doesn’t introduce any external libraries. Simply importing it can add a dynamic island at the top of the page.

Considering that both the dynamic-island and react-dynamic-island NPM packages have been preempted, I named it react-live-island 🎉.

I hope you will like it, It is really very simple, directly importing and then you can see a dynamic island! ✌️ while also providing rich customization props.

Introducing react-live-island by 🐤 Kee (https://kee.so)

https://kee.so/

https://www.producthunt.com/posts/kee-so

🐣 Initial Inspiration

We originally wanted to develop kee.so, starting in August 2021.

At that time, we saw the release of iOS widgets, the videos released by the new UI of Windows 11 and Android 12, and we liked the different system styles very much.

So we decided to develop a service for creating a “personal page” based on these different UI tastes.

🎙️ Original Idea of kee.so

Linktree provides a display of “horizontal bars”, a one-dimensional space, from top to bottom, very simple.

kee.so wants to create a differentiated experience, so “grids” came to mind, changes from one dimension to two dimensions, can be arranged horizontally and vertically.

With the inspiration of apps and widgets, the personal page experience is enriched and more possibilities are created.

📺 Launched Official Welcome Page

In August 2021, we registered the kee.so domain and Twitter account @_keeso.

In September 2021, the welcome page was launched, and the slogan was “Your home screen on internet”. This is the first tweet.

A personal page that can freely combine apps and widgets, so we gave it the concept: “home screen”.

🍱 Met Halfway Through … Bento

But kee.so did not have the right time to start formal development. In December 2022, Bento went online.

Although the idea is earlier than Bento, but developed late, so it is hard to avoid being called a Bento-like service.

But still, kee.so is only similar in “grids”, it is completely different in other aspects.

🪩 How kee.so Differs from Bento

The core of kee.so is not built on the concept of “bento 🍱”, but on the concept of “home screen”.

So in essence, the underlying concepts of kee.so and Bento are different.

What kee.so wishes to provide is a “home screen”.

📱 “Home Screen” x Web

A personal page that is identical in concept and design like a home screen of a phone.

It’s one page, one link, one “home screen” for everyone.

With the form of app + widgets, everyone can easily create a home screen on internet, which can be freely customized just like the home screen of a phone.

🍧 Unlimited Personal Page

This page focuses on displaying your various social links, URLs, pictures, and text.

This page link, uniquely defined by you, can be placed on any social platform, Instagram, Twitter, TikTok…

The design of the page is up to you to create freely, emoji icon, widget background color, home screen “wallpaper”, blurring, adding noise, you will not encounter any problems.

🐥 Your Home Screen on Internet

The degree of freedom and personalization of kee.so is far beyond that of Bento.

On mobile, its interface is completely responsive and does not require additional design, which is exactly the meaning of the web.

Be consistent on any screen and insist on consistent performance.

Make the only home screen, Perfect in everywhere. ⚡️

So in antd Form, how to monitor the change of a certain field?

1. form.getFieldValue

Before antd@4.20.0, assuming that we want to monitor the changes of the song field, we can easily write code like this:

const [form] = Form.useForm();
const songValue = form.getFieldValue('song');

<Form form={form}>
  <Form.Item label="Song" name="song">
    <Input />
  </Form.Item>
  {songValue?.length > 0 && <div>Song: {songValue}</div>}
</Form>;

What’s wrong with using form.getFieldValue?

The problem is that the value obtained by form.getFieldValue does not trigger UI updates. Simply put, it is not a state (the behavior of Form has changed with the upgrade of antd, and the behavior of old versions will not be discussed here).

But why sometimes, you can see the UI updated?

This is because in the actual business code, multiple interfaces may be requested (setState multiple times), and the Form may be updated by the parent to trigger re-render (in short, we all know that the number of re-renders of a React component is very high. Uncontrollable, especially when the code is poorly written 😜).

So it is not songValue that triggers the UI update, but in the new re-render, songValue is also updated.

This is a point that is very prone to bugs. Maybe the UI is normal during development, but as mentioned above, “the number of re-renders is very uncontrollable”, maybe a certain re-render is not triggered, and the UI related to songValue is also It will not be updated.

2. useState

We found a bug where the UI doesn’t update! So I naturally thought of: turn song into a state.

const [form] = Form.useForm();
const [songValue, setSongValue] = useState('');

<Form form={form}>
  <Form.Item label="Song" name="song">
    <Input onChange={(event) => setSongValue(event.target.value)} />
  </Form.Item>
  {songValue?.length > 0 && <div>Song: {songValue}</div>}
</Form>;

What’s wrong with using useState?

Put it simply, songValue here is not responsive, when song is updated using the built-in method of Form, the UI related to songValue will not be updated.

For example, when song is related to props changes, or related to interface data changes, when using form.setFieldsValue, form.resetFields, etc. to update form data, songValue will not be updated.

At this time, it is necessary to trigger setSongValue at the place where form.setFieldsValue and so on are executed.

When form.setFieldsValue is executed in a very high parent component, it is necessary to lifting state songValue up. To avoid this trouble, we prefer to handle changes in the child component’s useEffect.

Using useEffect not only triggers an extra re-render, but what if there are many fields that need to be processed in multiple places? (common situation in actual development)

We need to add a lot of repetitive code, write it back and forth, and forget where it is not added, where it needs to be added, and where it does not need to be added. In the end, the update logic will become a mess.

3. Form.useWatch

At the beginning, it was emphasized before antd@4.20.0, because from antd@4.20.0, antd Form added a new API Form.useWatch to handle this situation.

At this point, songValue can respond to the updates of form.setFieldsValue, form.resetFields, etc.

const [form] = Form.useForm();
const songValue = Form.useWatch('song', form);

<Form form={form}>
  <Form.Item label="Song" name="song">
    <Input />
  </Form.Item>
  {songValue?.length > 0 && <div>Song: {songValue}</div>}
</Form>;

What’s wrong with using Form.useWatch? (Why is there still a problem!)

In fact, it is not a problem, the main thing is that the performance is not good. Because Form.useWatch actually turns songValue into a state, and then handles the form linkage internally.

But the problem with state is that it will trigger the re-render of the entire component and perform unnecessary diffs. If the component is large and listens to Input for real-time input, this kind of performance consumption is terrible, and each key is one time. Full diff.

And this kind of re-render is actually meaningless, because we “precisely” know that we need to monitor the changes of the song field, and update the "partial" UI according to the value of song instead of updating the overall UI.

So is there a more elegant “partial update” solution?

4. Watch, from Ant Plus 5

Ant Plus 5 (antx) provides a Watch component, which is dedicated to listening to changes in form fields and updating local UI requirements.

Using the antx component can simplify the antd Form code, then the code to listen to song will be as follows:

import { Form, Watch, Input } from 'antx';

const [form] = Form.useForm();
<Form form={form}>
  <Input label="Song" name="song" />
  <Watch name="song">
    {(songValue) => {
      // Only update in this place,
      // not trigger the whole component re-render every time
      return songValue?.length > 0 && <div>Song: {songValue}</div>;
    }}
  </Watch>
</Form>;

By using Watch, you can avoid the performance problem of Form.useWatch non-stop full re-render, and at the same time, you don’t need to process the update logic in useEffect.

Using Watch, only the UI returned in the render props will be updated, and the entire component will not be linked to re-render continuously.

Online example → https://codesandbox.io/s/antx-v4hqw

5. Introducing Watch props

Watch can also use list prop to watch multiple fields.

name and list are mutually exclusive, because name(NamePath) of antd also supports array form, so list is used to distinguish different meanings of arrays.

children & onlyValid are mutually exclusive with onChange.

Use onlyValid to get only "valid values" that are not undefined in the children function. And setState can be executed in onChange.

Welcome to the Watch component of antx.

For more information about Ant Plus 5, please check → https://github.com/nanxiaobei/ant-plus

Ant Design Form Simplified, build Form in the simplest way.

Now Ant Plus 5 is released, redesigned and rewritten with TypeScript.

GitHub

https://github.com/nanxiaobei/ant-plus

Feature

• Say goodbye to cumbersome <Form.Item> and rules
• Full TypeScript hinting support
• Easily extend existing form components

Installation

pnpm add antx
# or
yarn add antx
# or
npm i antx

Usage

import { Button, Form, Input, Select, WrapperCol } from 'antx';

const App = () => {
  return (
    <Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
      <Input label="Name" name="name" rules={['required', 'max=10']} />
      <Select
        label="Gender"
        name="gender"
        rules={['required']}
        options={[
          { value: 1, label: 'Male' },
          { value: 2, label: 'Female' },
        ]}
      />
      <InputNumber
        label="Age"
        name="age"
        rules={['required', 'number', 'min=0']}
      />
      <WrapperCol>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </WrapperCol>
    </Form>
  );
};
export default App;

Introduction

antx provides a set of antd enhanced form field components, features of enhanced components:

1. No need to write <Form.Item>
Directly mix Form.Item props with the original field component props (full TypeScript hints), which greatly simplifies the code.

2. Simplified rules (only enhanced, original rules is also supported)
Provide rules in string phrase, for example rules={['required', 'max=10']} represents for rules={[{ required: true }, { max: 10 }]}.

3. Not add any other props
All props are antd original props, without adding any other props and APIs, reducing mental burden.

In addition, antx also provides 3 original components (Form, Button, Item), 2 custom components (WrapperCol, Watch), and a tool function create.

API

1. Enhanced field components

1st-level field components:

• AutoComplete
• Cascader
• Checkbox
• DatePicker
• Input
• InputNumber
• Mentions
• Radio
• Rate
• Select
• Slider
• Switch
• TimePicker
• Transfer
• TreeSelect
• Upload

2nd-level field components, in antd is AAA.BBB, and in antx can directly import BBB:

• CheckboxGroup Checkbox.Group
• DateRange DatePicker.RangePicker
• TextArea Input.TextArea
• Search Input.Search
• Password Input.Password
• RadioGroup Radio.Group
• TimeRange TimePicker.RangePicker
• Dragger Upload.Dragger

2. Base components

Form, Button, and Item are antd original components, provided for convenience. Watch and WrapperCol are custom components.

• Form
• Button
• Item Form.Item
• Watch used to monitor the changes of form fields, which can be only partial re-render, more refined and better performance

// Watch usage example
import { Watch } from 'antx';

<Form>
  <Input label="Song" name="song" />
  <Watch name="song">
    {(song) => {
      return <div>Song: {song}</div>;
    }}
  </Watch>
</Form>;

• WrapperCol simplify the layout code, the same props as Form.Item, used when the UI needs to be aligned with the input box.

// WrapperCol usage example
import { WrapperCol } from 'antx';

<Form>
  <Input label="Song" name="song" />
  <WrapperCol>This is a hint that aligns with the input box</WrapperCol>
</Form>;

3. create tool function

• create convert existing form field components into components that support Form.Item props mix-in, easily extend existing components.

import { create } from 'antx';


// After expansion (TypeScript hints support)
const MyCustomInputPlus = create(MyCustomInput);

<Form>
  <MyCustomInputPlus label="Song" name="song" rules={['required']} />
</Form>;

4. Simplified rules

// Simplified rules usage example

<Form>
  <Input label="Song" name="song" rules={['required', 'min=0', 'max=50']} />
</Form>

Comparison

Ant Plus and Ant Design form code comparison:

Try

Welcome to try → https://github.com/nanxiaobei/ant-plus

hugo-paper is a Hugo theme inspired by the paper reading experience to provide the best rendering of text.

There are currently 900+ GitHub Stars, and users from 13 countries around the world have submitted language packs.

Paper 6.0 is now officially released, refactored with Tailwind CSS, and redesigned.

Demo

Let’s take a look at the effect first: https://hugo-paper.vercel.app/

GitHub

View the source code of the theme: https://github.com/nanxiaobei/hugo-paper

6.0

- Thoroughly refactored using Tailwind CSS to embrace the latest development experience

- Redesigned UI, single-column + rounded corners + shadow to enhance the page’s agility

- Support to display personal information (avatar, nickname and profile) on the home page, more customized

- Optional monochrome Dark Mode button

- Added support for RSS link icon

In short, while retaining the existing design elements, it provides a new UI experience and more customization.

Screenshots

The End

hugo-paper 6.0 , welcome Star , welcome to try.

▷ 6.0 https://github.com/nanxiaobei/hugo-paper

1. What is SolidJS?

We all know SolidJS, if not, why are you reading this article!

We all know SolidJS, here is its doc: https://www.solidjs.com

Put it simply, SolidJS is the real “react” version of React, which is completely updated on demand, and where data changes are updated.

For example, a component:

function App() {
  const [value, setValue] = useState(0);
  return <div>{value}</div>;
}

React calls the entire function of App to death (i.e. re-render), while SolidJS only updates the small piece of value.

Of course, SolidJS is like this:

function App() {
  const [value, setValue] = createSignal(0);
  return <div>{value()}</div>;
}

In SolidJS, App is called only once during initialization, and is not executed after that.

So JSX in SolidJS is equivalent to “static template”, which is only used to describe the UI and will not be called again, and there is no diff.

That is to say, any function executed in App or any function executed in JSX will only be triggered once.

2. First declare

How to turn React into SolidJS?

Certainly not rename solid-js to react, nor manually use DOM API to update it without React logic.

It must be stated here:

The following implementation is completely based on the React API, rather than hacking with the DOM API or jQuery, which would be meaningless.

3. How to implement it?

1. How to update only the small piece of value()?

This is the core of the implementation idea, let’s just say it — that is to turn value() into a component.

Yes, it displays data, but it’s actually a component. It’s a component that just returns data.

2. Why value() instead of value?

Because we need to know that there is a data here, and it has to be updated later, how do we know?

According to JS syntax, there is no other way than state.value (use getter) or value() (call function).

This is why SolidJS must be written as value(). If it is written as value, God don't know how to update it, because in the implementation of "static template", the function will not run again.

3. Implement a useSignal similar to createSignal

We want to implement a useSignal, similar to SolidJS' createSignal, which returns two functions, a getter and a setter.

At the same time, the return of the getter is a component.

function useSignal(val) {
  const valRef = useRef(val);
  const update = useRef();

  const Render = () => {
    const [value, setValue] = useState(valRef.current);
    update.current = setValue;
    return value;
  };

  const getter = () => {
    try {
      useState(); // Use this hack to know whether the data is in JSX or read normally elsewhere
      return <Render />;
    } catch (e) {
      return valRef.current;
    }
  };

  const setter = (newVal) => {
    valRef.current = newVal;
    update.current(newVal);
  };

  return [getter, setter];
}

The above is a minimal implementation, but it is problematic because the data may be used in multiple places, and the above can only update the data in the last place.

4. Data synchronization update version useSignal

Collect the update functions with an array of listeners and that's it. In fact, this is also the implementation idea of React state managers.

function useSignal(val) {
  const valRef = useRef(val);
  const listeners = useRef([]);

  const Render = () => {
    const [value, setValue] = useState(valRef.current);

    useEffect(() => {
      listeners.current.push(setValue);
      return() => {
        listeners.current.splice(listeners.current.indexOf(setValue), 1);
      };
    }, []);

    return value;
  };

  return [
    () => {
      try {
        useState();
        return <Render />;
      } catch (e) {
        return valRef.current;
      }
    },
    (payload) => {
      listeners.current.forEach((listener) => {
        listener((prev) => {
          valRef.current =
            typeof payload === 'function' ? payload(prev) : payload;
          return valRef.current;
        });
      });
    },
  ];
}

The above is already a working implementation.

At this point, the core of the story has actually been told.

But if it is to be really used for development needs, there is still a lot of unfinished business.

4. What else is there to do?

If it’s really “available”, it should at least implement:

• createEffect (for listening for data updates)
• createMemo (for creating computed data)
• onMount (for sending requests)
• onCleanup (for unsubscribing)
• What if the data is an object or an array? (This is the most complicated, the above actually only considers primitive data types)
• How to implement conditional operator or function calls in JSX? (The conditional operator or function is only executed once during initialization and cannot respond to change)
• How to respond to HMR? What if the data doesn’t appear in JSX for the first time? How to unsubscribe after component unmount…

5. Introducing solid-react

There are a bunch of questions written on it, and naturally the answer is ready… This answer is called solid-react.

All the problems mentioned above have been solved. If you have a deeper understanding, you can look at the source code.

☞ GitHub: https://github.com/nanxiaobei/solid-react

Here is the API for solid-react:

• useSignal (corresponding to createSignal, used to create data)
• useUpdate (corresponding to createEffect, used to monitor data updates)
• useAuto (corresponding to createMemo, used to create computed data)
• useMount (corresponding to onMount, used to send requests)
• useCleanup (corresponding to onCleanup, used to unsubscribe)
• the data is an object or an array (use a proxy to handle this tricky case)
• Run (for conditional operator or functions in JSX, Run(() => fn(value()))

Please pay attention to the naming of the API, which is also said: try not to conflict with existing APIs (such as not directly naming useState useMemo, which will confuse the code), while keeping it concise enough (easy to write) and intuitive (easy to understand).

For specific API introduction, please check README: https://github.com/nanxiaobei/solid-react

In this way, most common development scenarios can already be covered, that is, it can be used for “production”.

6. Try solid-react

Demo: https://codesandbox.io/s/solid-react-rymhr6?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js

Here is a demo, you can open the console, click the button to try, and you will find:

Components don’t re-render anymore, React is completely SolidJS-style on-demand updates!

useUpdate useAuto does not need anything like deps, its dependencies are automatically learned. And only when dependencies change, they execute again.

Yes, that is to say, you can get rid of Hooks, useCallback useMemo deps memo, will it trigger re-render, it's all unnecessary.

A function is a function, an object is an object, and it will not be created again if it is written there.

7. What else?

solid-react is an experimental project, just to implement an idea, and in fact it is not bad.

solid-react tries its best to make it "completely capable", whether it is sending requests or monitoring data, sparrows are small (but delicious) and have all the internal organs.

solid-react is a small thing, it may have flaws, of course it can't compare with the maturity of developing directly with React, and it is impossible to compare.

solid-react is definitely fine for small demo projects, but I haven't practiced it in big projects, it's good to play with it first, if you're interested.

solid-react is more like a concept. It is impossible for React officials to take this road, but thanks to the open source, you can experiment on this road yourself.

solid-react works hard to "suffer from Hooks", a general confusion in the industry that has not disappeared for several years (although I feel Hooks are fine)

solid-react welcomes those who are interested to try it together and create more possibilities.

Turn React into SolidJS, say goodbye to Hooks, say goodbye to re-render ↓↓↓

https://github.com/nanxiaobei/solid-react

Some people may want to say, isn’t the API of solid-react are Hooks? How to say goodbye to Hooks! In fact, the above is to be compatible with the mixed use of React and solid-react … Yes, I even considered this situation 🙈

1. resso, React state management has never been so easy

resso is a brand-new state manager for React, aims to provide the world’s easiest way to use.

resso also implements on-demand updating. If the unused data changed, it will never trigger the component updating.

GitHub: https://github.com/nanxiaobei/resso

import resso from 'resso';

const store = resso({ count: 0, text: 'hello' });

function App() {
  const { count } = store; // deconstruct first, then use
  return (
    <>
      {count}
      <button onClick={() => store.count++}>+<button>
    <>
  );
}

Only one API resso, just wrap the store object, nothing else.

To update, just re-assign the key of the store.

2. How does React state manager works?

Suppose there is a store, injected into different components:

let store = {
  count: 0,
  text: 'hello',
};

// Component A
const { count } = store;
const [, updateA] = useState();

// Component B
const { text } = store;
const [, updateB] = useState();

// init
const listeners = [updateA, updateB];

// update
store = { ...store, count: 1 };
listeners.forEach((update) => update(store));

Put the setState from each component into an array listeners.

When updating the store, iterate through listeners to call every setState, this will update every components.

How to monitor the store data changing? A public update function (such as Redux’s dispatch) can be provided, which is updated if called. You can also use the proxy's setter to listen.

Yes, almost all state managers work this way, it’s that simple. For example, the source code of Redux: https://github.com/reduxjs/redux/blob/master/src/createStore.ts#L305-L308

3. How to optimize the update performance?

All setState in listeners is called every time the store is updated, which can cause performance issues.

For example, when updating count, theoretically only A is expected to update, at this time B is also updated, but it does not use count at all.

How to update on demand? You can use a selector (such as Redux’s useSelector, or zustand's implementation):

// Component A
const { count } = store;
const [, updateA] = useState();

const selector = (store) => store.count;

const newUpdateA = (newStore) => {
  if (count !== selector(newStore)) {
    updateA(newStore);
  }
};

The same way for other components, subscribing newUpdateA to listeners can achieve "on-demand update" of components.

Above functions can also be implemented using proxy’s getter, and the data “used” by the component can be known through the getter.

4. How is resso implemented internally?

In the above implementation, one setState is collected in each component. When updating the store, determine whether to update the component through data comparison.

resso uses a new idea, which is actually more in line with the primitive concept of Hooks:

let store = {
  count: 0,
  text: 'hello',
};

// Component A
const [count, setACount] = useState(store.count);

// Component B
const [count, setBCount] = useState(store.count);
const [text, setBText] = useState(store.text);

// inti
const listenerMap = {
  count: [setACount, setBCount],
  text: [setBText],
};

// update
store = { ...store, count: 1 };
listenerMap.count.forEach((setCount) => setCount(store.count));

Use useState to inject each data from store used in the component, while maintaining a list of updaters for each key in the store.

The number of setStates collected in each component corresponds to the store data used. Instead of just collecting one setState for the component updating.

When updating, there is no need to do data comparison, because the update unit is based on the “data” level, not based on the “component” level.

To update a certain data is to call the updater list of this data, not the updater list of the component. Primitive the entire store.

5. How the API of resso is designed?

The secret to designing an API: write the usage you want first, and then figure out how to implement it. What comes out of this must be the most intuitive.

resso also thought about the following API design at the beginning:

1. Similar to valtio

const store = resso({ count: 0, text: 'hello' });

const snap = useStore(store);
const { count, text } = snap; // get
store.count++; // set

This is the standard usage of Hooks, with the disadvantage of adding an extra API useStore. And using snap when getting, using store when setting, makes people split. This is definitely not the "simplest" way.

2. Similar to valtio/macro

const store = resso({ count: 0, text: 'hello' });

useStore(store);
const { count, text } = store; // get
store.count++; // set

This is also achievable and is the standard usage of Hooks. At this time, the main body of get and set is unified, but it is still necessary to add a useStore API. This thing is only for calling Hooks, what if the user forgets to write it?

And in practice, it is found that when using store in each component, you have to import two things, store and useStore, which is definitely not as simple as importing only one store, especially when it is used in many components, will be very troublesome.

3. In order to import only one store

const store = resso({ count: 0, text: 'hello' });

store.useStore();
const { count, text } = store; // get
store.count++; // set

This is the last hope of a “legal” use of Hooks, just importing a store, but it still looks weird and unacceptable anyway.

If you try to design this API, you will find that if you want to directly update the store (requires import store), and want to deconstruct store data from Hooks (need to import one more Hook, get and set are from different sources), no matter what, the design will looks awkward.

For the ultimate simplicity, for the easiest way to use, resso finally embarked on this API design:

const store = resso({ count: 0, text: 'hello' });

const { count } = store; // get
store.count++; // set

6. How to use resso?

Get store

Because the store data is injected into the component using useState, it needs to be destructure first (destructure means calling useState), destructure at the top level of the component (Hooks rules, cannot be written after if), and then use, otherwise there will be a React warning.

Set store

Assignment to the first level of the store data will trigger the update, and only the assignment of the first level will trigger the update.

store.obj = { ...store.obj, num: 10 }; // ✅ trigger update

store.obj.num = 10; // ❌ does not trigger update (valtio supports this way)

resso does not support the writing method like valtio, mainly due to the following considerations:

1. It is need to traverse all the data deeply to proxy, and when updating the data, it needs to be proxy first, which will cause a certain performance loss. (resso only proxy store once at the initialization.)
2. Because all data are proxy, it is not friendly when printed in the Chrome console, which is a big problem. (resso does not because only the store is a proxy, and generally prints the data in the store.)
3. If the sub-data is destructured, such as obj, obj.num = 10 can also trigger the update, which will cause the data source to be opaque, and it is uncertain whether it comes from the store and whether the assignment triggers the update. (The main body of resso is always from the store, and the source is clear.)

7. Simple. Not chaos

The above is the design concept of resso and some implementations of a React state manager.

At the end of the day, the React state manager is a tool, React is a tool, JS is a tool, programming is a tool, and the job itself is a tool.

The purpose of tools is to create, to create works that act on the real world, not the tools themselves.

So, why not make it simpler?

jQuery is to simplify the development of native JS, React is to simplify the development of jQuery, development is to simplify the process in the real world, the Internet is to simplify people’s communication path, work path, consumption path, the meaning of development is to simplify, the meaning of the Internet itself is simplification, and the value of the Internet lies in simplification.

So, why not make it simpler?

Chic. Not geek.

Simplicity is everything.

try try resso: https://github.com/nanxiaobei/resso