Photo by Ciprian Boiciuc on Unsplash

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.

Implementation using delay

Basically, we implemented a Hook that wraps both onClick and onDoubleClick handlers to delay every onClick handler until we can assure that the…

Photo by Brianna Santellan on Unsplash

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…

Photo by Ewa Gillen on Unsplash

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…

Photo by Bonnie Kittle on Unsplash

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…

Photo by Brianna Santellan on Unsplash

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…

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…

Photo by zhenhao Liu on Unsplash

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

Photo by Lucas Andión.

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

Photo by Vedant Choudhary on Unsplash

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…

Photo by Fabien Bazanegue on Unsplash

The last October 25th Sophie Alpert and Dan Abramov introduced the new React proposal version at the React conf 2018:

React v16.8 is meant for solving some problems that we’ve been dealing with for so long:

  • Confusing classes for both human and machines: Classes require a lot of boilerplate, force us to bind event handlers and to understand how this works in Javascript, present issues for some tools like hot reloading, decreases the compilation performance, etc.
  • Reusing logic: React doesn’t offer a way to “attach” reusable behavior to a component. Mixins was the first workaround but we ended up…

Ceci García García

Software developer @trabe.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store