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.
Using class components we have the component’s single state object, which we usually update using a…
In this article, we will deal with some of React’s functionality which is designed to optimize the application — React
They are all familiar tools, but not so easy to understand.
So how and when should they be used?
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.
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…
“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 is the world’s largest software registry, with more than 1 million packages. …
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.
Assuming that you will probably need to have access to the parent component’s
props from the child component, you will need to somehow bind the function to the parent component instance.
While there are…
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…
A passionate full-stack developer. Playing with React ⚛, Node.js 🔫, Typescript 👾. Curious about all kinds of futuristic and green technologies ♻️🌱🌿.