Latest Posts

Introduction Since React hooks landed, there has been many libraries proposed for global state. Some of them are simple wrappers around context. Whereas, some of them are full featured state management systems. Technically, there are several implementations how to store state and notify changes. We don’t go in detail in this post, but just note two axes. whether context based or external store whether subscriptions based or context propagation In this post, we focus on API design of hooks at the consumer end. ... Read More
Introduction useReducer is a powerful hook. It’s known that useState is implemented with useReducer. In the React hooks docs, it’s noted like this: useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks. ... Read More
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. This post shows benchmark results to convince that it actually is performant in one scenario. ... Read More
Introduction There are many libraries to provide global state in React. React itself doesn’t provide such a feature, probably because separation of concerns is important and having global state naively is not idiomatic. However, in certain cases, having global state is good as long as it’s properly implemented. It’s likely that performance drops down compared to using non-global state (incl. multiple contexts). This post introduces a library for global state with performance. ... Read More
Introduction If you had already used Redux and loved it, you might not understand why people try using React context and hooks to replace Redux (a.k.a no Redux hype). For those who would think Redux DevTools Extension and middleware are nice to have, Redux and context + hooks are actually two options. Context + hooks is just fine to share state among components, however if apps get bigger, they are likely to require Redux or other similar solutions; otherwise they end up having many contexts that can’t be handled very easily. ... Read More
Introduction Global state or shared state is one of the biggest issues when you start developing a React app. Should we use Redux? Do hooks provide a Redux-like solution? I would like to show four patterns toward using Redux. This is my personal opinion and mainly for new apps. Pattern 1: Prop passing Some might think it wouldn’t scale, but the most basic pattern should still be prop passing. If the app is small enough, define local state in a parent component and simply pass it down to child components. ... Read More
Introduction Recently, React Redux released hooks API. It’s v7.1.0-alpha.4 as of writing. On the other hand, I’ve been developing a new React Redux binding library with hooks and Proxy. 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. ... Read More
Introduction React Redux is one of popular web tech stacks. As I found React hooks so promising, I have been developing a hooks-based library for React Redux called “reactive-react-redux.” Coding style using this library is mentally different from the official react-redux. Thanks to Proxy, developers don’t need to care about optimization, but just focus on composition of logic. This library provides two basic hooks: useReduxState and useReduxDispatch. This article shows example code how to use them. ... Read More
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. ... Read More
Background React 16.8 added a new API, Hooks. If you haven’t learned hooks yet, go to the official site and read the entire document before continuing this article. Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. This… This article is about how to create custom hooks for data fetching. As described in the roadmap, React is planning to release react-cache and Suspense for data fetching in the near future. ... Read More