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 onClick handler took around 1200ms, 300ms of which were expended on the defined delay and 100ms on executing the callback. So who is to blame for wasting the other 800ms? The JavaScript event loop 😑.

The setTimeout function sets a timer which executes a function on the next event cycle once the timer expires. This means, the final delay will depend on the current status of the event loop.

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:

The <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.

Handling both onDoubleClick and onClick events

React allows us to handle DOM events in React elements. Equivalent to click event and dblclick event, in React we can configure, for an element:

• onClick: callback that will be executed when a click event is triggered.
• onDoubleClick: callback that will be executed when a dblclick event is triggered. …

In this post we’ll cover what the useRef Hook is, what we can use it for and some advice for using it.

The 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);

There are two main uses of useRef that are explained in the following sections: Accessing the DOM nodes or React elements and keeping a mutable variable.

Accessing the DOM nodes or React elements

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:

• Routing managed with React Router.
• Private routes only accesible for authenticated users.
• Auth data accesible from any component using React Context.

Initial setup

We create a simple React app with a common layout and a dynamic content that changes depending on the current route:

The <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. …

In my last posts we introduced the React Hooks and talked a little about managing the state with the state hooks (useState and useReducer). In this post we’ll cover the Effect Hook useEffect.

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.

With the 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 useState and useEffect. In this post we’ll address the useReducer hook.

Managing component state with the useState hook

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. …