Image for post
Image for post
Photo by Lou Brassard on Unsplash

React is declarative. It’s almost the first thing you are told about the library in its home page:


Image for post
Image for post
Photo by Jens Johnsson on Unsplash

Adding a data-testid attribute as a way to identify a DOM node for testing purposes, is a common tool recommended by many (testing-library, cypress) as it decouples the DOM structure of your application from its tests.

When working with React, setting a data-testid on a DOM node (a host component) is easy: you just… set it 😅

Defining test ids for your components

React is all about components, right? So, how do you set a data-testid inside a DOM node rendered by a component? Well, you have to pass a prop. …


Image for post
Image for post
Photo by Anton Darius on Unsplash

We’ve written before about how we use Yarn workspaces and Lerna to setup monorepos. In this post I want to focus on how we solve the problems caused when different packages in the monorepo depend (directly or transitively) on different versions of the same dependency.

A real-world scenario

One of our projects is a monorepo with 8 different packages. One of those packages provides tooling to format JavaScript code using Prettier, version 1.19.1, and also to check the code formatting using ESLint. …


Image for post
Image for post
Photo by patricia serna on Unsplash

For one of our projects, we have to update a bunch of preexisting React components to make them match a redesign given in Figma. This implies having to adjust margins, paddings, and relative positions, making the “real” components a pixel-perfect replica of the “designed” ones.

The problem with pixel-perfect stuff is that you have to measure your components by the pixel. And pixels are tiny 😅. So, I find myself creating “ruler” divs many times a day. …


Image for post
Image for post
Photo by Chad Kirchoff on Unsplash

In his post Stop using isLoading booleans, Kent C. Dodds tells us to… well, to stop using booleans to keep track of binary states 😅. The problem with using a boolean flag to model our component’s state is that, usually, the flag is just part of a bigger, more complex state.

When you encode your component’s state in a bunch of binary flags, you end up rendering with a lot of conditional checking. That leads to code that is really difficult to maintain and extend.

Instead of using boolean values, Kent recommends using a state machine. …


Blue, red and orange liquids merging over a black background
Blue, red and orange liquids merging over a black background
Photo by Lucas Benjamin on Unsplash

vcs-jump is a Vim plugin created by Greg Hurrell that “allows you to jump to useful places within a Git or Mercurial repository: diff hunks, merge conflicts, and grep results”.

I find it specially useful to resolve merge conflicts when rebasing or merging branches in git repos. Before I discovered this plugin, my merge/rebase workflow used to look like this:

  1. Run git checkout my-feature-branch.
  2. Run git rebase master.
  3. Get a CONFLICT warning 😖.
  4. Run git status to clearly see which files have merge conflicts (I know they are listed when the rebase fails, but the output is so bloated with info messages that I get overwhelmed). …


White arrow painted on a blue wall
White arrow painted on a blue wall
Photo by Nick Fewings on Unsplash

When you need to get a reference to some component in a React application, you can use a ref.

Whether you use a callback or a ref object (created with either createRef or the useRef Hook), you just need to attach the ref to a component’s ref prop and you are done:

Now, suppose that the users of the Button component above want to get a ref to the DOM element.

You can use forwardRef to get the ref provided by the users:

But now you have a problem. What do you do with that ref? If you assign it to the button, you’ll break the auto-focus functionality. …


Image for post
Image for post
Photo by Lance Anderson on Unsplash

In a previous story I wrote about using a components provider to customize your components. The code I shared in that story was a bit naïve (on purpose):

In this story I’ll try to tackle two problems that prevent the snippet above from being used in a production application.

Context-triggered re-renders

This first problem is not specific to a components provider, but a common issue that you must be aware of if you use React Context.

When you provide a value via context to some consumers, React will re-render those consumers whenever the provided value changes. If the value you share is an object, like in the code above, you have to be specially careful: building the value using a literal will result in a new (different) object being shared on every render. …


Image for post
Image for post
Photo by Eric Prouzet on Unsplash

When we talk about component customization, we usually think of style theming: changing the way a component looks by adjusting its style properties, based on some global values (the theme).

In this story, however, I’ll be talking about a different level of customization. When you develop a UI library, some of the more complex components are created using other basic components (think a ConfirmationDialog using a Button). …


Image for post
Image for post
Photo by Mikhail Vasilyev on Unsplash

In this story we’ll have a look at some advanced ways to compose React components, how they work and when to use them.

cloneElement

As you might know, you can pass rendered components through props (that’s what you are doing whenever you use children, anyway 🙂). You can even use that as a neat trick to optimize your components.

Once you get a rendered component, you can pass it new props using React.cloneElement. This way, while it is up to whoever is using your component to decide what to render, you still get to customize the received component.

In the example above, SecretNote uses cloneElement to inject a value into an element. SecretNote doesn’t know which component will be used to render its value. It gets a React element via props, it injects its value into that element, and finally it renders it. …

About

Asís García

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