Pablo Garcia – Medium

Apr 15

React simple polling custom hook usePollingEffect.

A remarkably simple polling function can be implemented with React hooks. There are two main differences between a usePollingEffect and a useInterval custom hook. First, the polling effect must execute as soon as it is called (contrary to an interval which would trigger the first call only after the specified…

React

2 min read

Mar 30

Media queries with CSS in JSS using @emotion/react.

Using media queries in JavaScript is relatively simple now if you use libraries like @emotion/react. Emotion is a performant and flexible CSS-in-JS library that allows you to style apps quickly with string or object styles. import { css } from '@emotion/react' const smallAndBigger = '@media only screen and (min-width: 300px)' …

React

2 min read

Mar 30

ReactJS useMediaQuery hook using window.matchMedia(‘…’).

It is considered a bad practice to listen to the resize event with JavaScript because it can lead to many UX issues, and it doesn’t consider more complex scenarios. Now with the window.matchMedia API we can safely use media queries just like in CSS. This is useful when in React…

React

2 min read

Mar 24

Useful Git Commands

This is my personal “uncommon but very useful git commands” cheat sheet. I use the command line constantly and I prefer not to use aliases unless I must. But what is “uncommon”? Well, anything that I don’t use that often and thus tends to be forgotten. git stash | by name Stash changes using a…

Git

3 min read

Mar 10

Restrict the number of times a function can be executed concurrently.

When working with browser APIs, you might have noticed that asynchronous listeners can be consecutively executed (multiple times in a row) even if the first asynchronous callback hasn’t finished executing. This is painfully obvious if you work with themousemoveevent but it might also not be so obvious if you work…

Java Script

2 min read

Jan 28

Using AbortController with Fetch API and ReactJS.

There are multiple scenarios where we want to abort a fetch request but there are two most common that come to mind. First, to avoid duplicate calls with Incremental Search. And second, when a component or view is unmounted. It is simple to implement an abortable fetch request, but to…

Reactjs

4 min read

Dec 28, 2021

Simple React Infinite Scroll using Intersection Observer API

JavaScript and browsers’ APIs are constantly evolving to incorporate common web patterns that aim to increase UX. For example, Infinite Scroll, which reduces First Contentful Paint (FCP), Time to Interactive (TTI), Speed Index, and Total Blocking Time because there is less data to load at first. Consider a web page…

React

3 min read

Dec 27, 2021

How to avoid running effects on every render in React (useRefVariable hook).

If you have built a reusable React component before, chances are you’ve noticed that it is easy to arrive at the land of unnecessary optimizations. Your component might require a callback to be passed and if this callback is used inside a useEffect, then you might end with an effect…

React

2 min read

Nov 17, 2021

Solving React dependency injection in userland for testability

Using React hooks and context we can implement a simple dependency injection pattern to replace components’ dependencies when testing. The fact of the matter is that dependency injection is a hard problem to solve and there are multiple solutions out there but here is one that doesn’t require too much…

React

3 min read

Oct 29, 2021

React doesn’t always trigger a re-render on setState

For new React developers, it is common to think that setState will trigger a re-render. But this is not always the case. If the value doesn’t change, React will not trigger a re-render. Let’s say we had the following custom React hook that returns the day of the month: function…

React

2 min read