Introduction I have been developing various global state libraries for React. For example: react-tracked react-hooks-global-state My main motivation is to eliminate selector functions that are only required for render optimization. Render optimization here means it avoids extra re-renders. An extra re-render is a re-render process that produces the same view result as before. Since Recoil is announced, I’m very interested in atom abstraction because it eliminates selector functions for render optimization and the API seems pretty intuitive....

Introduction React released Concurrent Mode in the experimental channel and Suspense for Data Fetching. This release is for library authors, and not for production apps yet. The new data fetching pattern proposed is called Render-as-You-Fetch. This post mainly discuss Render-as-You-Fetch for basic fetch calls, like calling REST APIs. But, some of discussions are not limited to REST. One could invoke GraphQL endpoints with simple fetch calls. For more complex use cases with GraphQL, it’s worth looking into Relay documentation too....

Introduction We have been waiting for “Suspense for Data Fetching” for a long time. It is now provided as an experimental feature in the experimental channel. Check out the official docs for details. Introducing Concurrent Mode Suspense for Data Fetching Concurrent UI Patterns Adopting Concurrent Mode Concurrent Mode API Reference They are trying best to explain new mind sets with analogies. That means it’s totally different from the usage with traditional React....

Introduction React useContext is very handy to avoid prop drilling. It can be used to define global state or shared state that multiple components in the tree can access. However, useContext is not specifically designed for global state and there’s a caveat. Any change to context value propagates all useContext to re-render components. This post shows some example code about the problem and the solution with state usage tracking. Problem Let’s assume a person object as a state....

Introduction React-Redux provides hooks API with nice abstraction. Especially, useSelector is probaly less misused than mapStateToProps. react-tracked is a library for global state without Redux. This library provides almost compatible hooks API to React-Redux. It’s developed with performance in mind, and it should be as performant as React-Redux, even though it utilizes only React context. See the GitHub repo for more information. https://github.com/dai-shi/react-tracked This post shows benchmark results to convince that it actually is performant in one scenario....

Introduction Recently, React Redux released hooks API. It’s v7.1.0-alpha.4 as of writing. https://github.com/reduxjs/react-redux/releases/tag/v7.1.0-alpha.4 On the other hand, I’ve been developing a new React Redux binding library with hooks and Proxy. https://github.com/dai-shi/reactive-react-redux It’s time to benchmark both of them to have better understanding in performance. The reactive-react-redux library utilizes Proxy to auto-detect state usage, hence it technically has overhead which would affect performance. We would like to learn how much it will be affected in a realistic example....

This short article shows code examples how hooks are analogous to components in terms of composition. Without a word, let’s jump in the code. React components Let’s use a minimalistic example. Here’s a component. const Person = ({ person }) => ( <div> <div className="personFirstName"> <span>First Name:<span> <span>{person.firstName}</span> </div> <div className="personLastName"> <span>Last Name:<span> <span>{person.lastName}</span> </div> </div> ); Well, this component is a little bit big, so let’s split it into functions and compose them....

In my previous article, I introduced how the custom hook useAsyncTask handles async functions with AbortController and demonstrated a typeahead search example. In this article, I explain about the implementation of useAsyncTask. Recap JavaScript promise is not abortable. The fetch API is based on promise, and hence you can’t cancel it in pure JavaScript. To cancel fetch, the DOM spec introduced AbortController. The AbortController is a general interface and not specific to fetch....

Background Ever since I learned Redux, I’ve been thinking an alternative integration of react and redux to the official react-redux library. The intuition behind it is that Redux is super simple which I like a lot, whereas react-redux is complex because of performance tuning. If you are developing a business product, the official react-redux is to go without a doubt, but if you are playing with creating a toy app or you are just starting learning Redux, you might want something more straightforward....