Changing the state and how it affects the component renders
In both hooks and class components, we have several ways to construct and alter the component’s state. We change the state by calling setState or using useState. These changes cause parts of the component to re-render, and possibly to its children.
An interesting mechanism of React, which is not mentioned much, is the state batch updating. Instead of one by one, React does batch updates, reducing the number of component renders.
In this article, we will examine how and when this happens, using examples.
Class components state
Using class components we have the component’s single state object, which we usually update using a…
Once upon a time… React memo, useCallback, and useMemo
In this article, we will deal with some of React’s functionality which is designed to optimize the application — React memo, useCallback, and useMemo.
They are all familiar tools, but not so easy to understand.
So how and when should they be used?
Once upon a time…
Our story begins with 26-year-old John and 25-year-old Jane, two programmers of the app ×´User Details×´, and good friends as well.
So the situation is this, Jane’s and John’s details are displayed inside a component called UserComponent, which gets the user’s information as props.
So it won’t cause an unexpected behavior: React Lists and Keys 101
Often when reading articles or going through React tutorials, you’re going to see a lot of examples where developers use the index of an element as the key for list rendering.
It keeps the code simple and elegant and of course, gets rid of the warning you see in the console. But unfortunately, it’s an anti-pattern.
“We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state.” — according to React’s docs.
In this article, I want to show you how to wisely use the…
Choosing the right package from an endless number of modules can be overwhelming. This can help
If you’ve spent any time in the Node or front-end JavaScript world, you are probably familiar with NPM and know there are hundreds of thousands of modules to choose from.
“Analysis paralysis describes an individual or group process when overanalyzing or overthinking a situation can cause forward motion or decision-making to become “paralyzed”, meaning that no solution or course of action is decided upon.” — Wikipedia
NPM (Node Package Manager)
NPM is the world’s largest software registry, with more than 1 million packages. …
How do I pass an event handler to a component?
<MyComponent onClick={this.handleClick}>In React, there are several cases where you may want to pass a function (like onClick) as a prop from a container to a child component — usually in order to let the child notify the parent of some event.
For example:
Assuming that you will probably need to have access to the parent component’s state or props from the child component, you will need to somehow bind the function to the parent component instance.
While there are…
There are all kinds of options to style React. Choose the right one for your project
When it comes to styling React applications or React components, you have a broad variety of options. You can use normal CSS, you can use packages like styled-components, and much more.
In this article, I’ll have a look at some of the most popular options and show you why you might want to use them. By the end of it, you will have no problem picking the right styling solution for your next project. You may even learn about an option you weren’t aware of before.
Let’s dive right in and see how we can style React components and therefore…
Nitai Aharoni 🎾
A passionate full-stack developer. Playing with React ⚛, Node.js 🔫, Typescript 👾. Curious about all kinds of futuristic and green technologies ♻️🌱🌿.
