React is declarative. It’s almost the first thing you are told about the library in its home page:
But, what does it mean? “Declarative”, at least in the programming sense, is usually defined as “telling what to do instead of how to do it”. When we talk about React being declarative, the most common explanation revolves around how when you write a component, you just tell React what do you want the DOM to look like, and just let React handle it from there. You don’t have to worry about how the different elements currently in the web page have to change, or which ones have to be removed or inserted. You just say “I want a button there, and I want it disabled”, and React makes it happen. “Now I want the button to be enabled”. …
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 😅
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.
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:
git checkout my-feature-branch.
git rebase master.
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.
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.
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
In this story we’ll have a look at some advanced ways to compose React components, how they work and when to use them.
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,
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. …