A few months ago I had to deal with a problem: React triggers the
onClick event twice before triggering the
onDoubleClick when a pointing device is double-clicked and I needed to handle both events in different ways. I wrote a post back then implementing a solution (“Prevent click events on double click with React”) but it wasn’t until a few weeks ago that I found out that this solution can degrade the performance when managing these events.
Basically, we implemented a Hook that wraps both
onDoubleClick handlers to delay every
onClick handler until we can assure that the click is not part of a double-click event (after 300ms without receiving a new
Lately, I’ve been doing some work on improving the performance of a web application and I came up against an odd problem: a delayed
How can we make the callback function be executed right after the delay time has passed? …
In Trabe, we’re working on migrating class components to functional components with Hooks. This week, we came across a particular problem when passing callbacks as a dependency of a
useEffect Hook. Let’s see the problem with an example:
We need a
<Counter /> that accepts a “notify” callback, and uses it to notify about its value changes:
<Counter /> will notify about its value on the first render (the source gets the initial value), and on any subsequent changes.
The thing is, the source to notify may change because a new
url is injected to
<CounterNotifier />. When the
url changes, since the
<Counter /> is already mounted, the new source won’t receive the current value until a change happens (the effect is triggered). …
This post proposes two implementations (one with a HOC, and the other one with a Hook) that solve the problem of React triggering the
onClick event twice before triggering the
onDoubleClick when a pointing device is double-clicked.
If you already know about this problem, you can skip the next section and jump directly to the solution.
onClick: callback that will be executed when a
clickevent is triggered.
onDoubleClick: callback that will be executed when a
dblclickevent is triggered. …
useRef Hook is a function that returns a mutable ref object whose
.current property is initialized with the passed argument (
initialValue). The returned object will persist for the full lifetime of the component.
const refContainer = useRef(initialValue);
If you’ve worked with React for a while, you might be used to using refs for this purpose. Below there’s an example of the use of refs in class…
Recently I had to configure as private some routes of a React app (only accesible for authenticated users). This post describes the basic implementation of the app that covers:
We create a simple React app with a common layout and a dynamic content that changes depending on the current route:
<Router> component defines all the possible routes of our app and their corresponding components:
We want to configure each route as public or private (or, in a future, some more specific restrictions like “only for admin users”). There are a lot of ways to do that, but the one we chose consists in delegating the responsibility to each route. This way, a route will render the corresponding component when the user is already authenticated or the sign in page when they are not. To do that, we need our
<Route> components to have access to the auth data. …
A common problem in React involves passing
props from a component down through several layers of components.
Below is an example of a component that consists in a list of tasks and some actions to manage that tasks. The
<TodoList /> keeps the state of the list, so the callbacks to manage it should be passed down to the components that will use them:
Instead of having to pass each callback down the tree in every component, we can define an API object that collects all callbacks. …
The Effect Hook lets you perform side effects in function components. Some examples of “side effects” or just “effects” can be data fetching, manually changing the DOM or setting up a subscription.
useEffect Hook we can tell React that after every render, the callback passed to this
useEffect function as its first parameter (“effect”) should be called. …
In my last post “React 16.7”, we had a look at the new React proposal version (which, by the way, it’s not a proposal for v16.7 anymore, but for v16.8) and a brief introduction to the hooks
useEffect. In this post we’ll address the
useState is the basic hook that allows us to keep a state in a functional component. A basic usage example:
The updater function returned by the
useState hook works much the same as the previous React
setState function, except that the new one replaces the whole state with the argument passed instead of merging it with the old state. …
React v16.8 is meant for solving some problems that we’ve been dealing with for so long: