React is declarative. It’s almost the first thing you are told about the library in its home page:
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. …
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. …
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. …
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. …
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:
- Run
git checkout my-feature-branch. - Run
git rebase master. - Get a
CONFLICTwarning 😖. - Run
git statusto 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). …
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. …
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. …
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). …
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
