The useState hook is probably the most popular and frequently used hook in React. There were a few questions I had about it. If a component had multiple useState hooks and an event handler did multiple state updates, will the component render multiple times? If a setState function did not change the state value, will the component be rendered again?
To answer these questions, I created a sample component.…
There are lot of reasons to love React Hooks. But I have one reason that stands out from the rest.
Consider a class component that sets some state. This component has a controlled input within it.
class MyInput extends Component {
state = { text: '' };
render() {
<input type="text" value={text} onChange={..} /}
}With class components there are three ways to write onChange handler.…
The new Hooks API solves a lot of problems. But it does not solve the problem why we need Redux and Higher Order Components. This article explains why.
Consider a React app with independent container components: ‘Module A’, ‘Module B’, ‘Module C’ and so on. When I say independent, what I mean is Module A does not share state with Module B or Module C.…
Redux is a global state manager. React Redux provides bindings for React apps. In this article, I will show how we can manage global state using reducer functions just like how Redux does.
useReducer hook has a few limitations. We cannot use the hook with the same reducer more than once. Because of the limitation, a React app using useReducer hook passes down props from the container components down to leaf level components.…
Global state lifts state and puts it outside React components. This helps in sharing state between components. Most React apps use Redux or Mobx for global state management. In this article, we will learn how to use the new React Hooks API and useReducer function for global state management.
This article is yet another tutorial or lab. So, I encourage readers to try out this tutorial after reading it.…