React on Osmar Petry

Optimizing React with Memoization

Wed, 15 Jan 2025 00:00:00 +0000

Introduction

It’s important to understand the component lifecycle and when to re-render. Some tips to optimize React include:

Use useMemo or memo to memoize expensive calculations or component render.
Use useCallback to memoize callback functions.
Use React.PureComponent instead of React.Component for pure components.
Use shouldComponentUpdate lifecycle method to avoid unnecessary re-renders.
Avoid using the state for non-essential data that does not affect the render.
Avoid using too many inline functions and use memoized callback functions instead. It is important to note that the most important aspect of optimization is to understand the performance bottlenecks in your application and address them accordingly.

useMemo

This is a hook that is used to memoize a component’s expensive calculations. It helps to reduce the number of re-renders by only recalculating the value when one of its dependencies has changed. It takes two arguments, the first being a calculation function and the second being an array of dependencies. If the dependencies change, the calculation function will be re-executed, otherwise, the previously calculated value is returned, example:

React ForwardRef

Wed, 15 Jan 2025 00:00:00 +0000

By default, React does not let a parent component access the DOM node of a child component. forwardRef breaks that boundary explicitly — the child opts in to exposing its DOM node (or instance) to whoever holds the ref.

The typical need is imperative control from a parent: focusing an input inside a design-system <Input> wrapper, scrolling a <List> to a specific row, or triggering animations on a child element. Without forwardRef, the parent would need to own the DOM directly, which defeats the purpose of encapsulation.

React.Suspense

Wed, 15 Jan 2025 00:00:00 +0000

React.Suspense is a boundary component that lets you declaratively specify a fallback UI while its children are “suspended” — waiting for code to load or, in frameworks like Next.js/Remix, for async data to resolve. It decouples the loading concern from the component that needs the data, keeping each piece focused on its own responsibility.

Why use Suspense

Suspense lets you declaratively handle loading states for code-splitting and async data (with frameworks that support it). It improves first-load performance and keeps your UI logic focused on states that matter.

useRef

Wed, 15 Jan 2025 00:00:00 +0000

useRef gives you a mutable container — { current: value } — that persists for the full lifetime of the component without triggering re-renders when changed. This makes it the right tool for two distinct jobs: holding a reference to a DOM node for imperative operations, and storing any mutable value that your component needs to remember across renders but that should not drive the UI.

The key mental model: useState is for values that should be shown; useRef is for values that should be remembered.

Testing Concepts Notes

Fri, 15 Jan 2021 00:00:00 +0000

BDD

BDD (Behavior Driven Development) is a method of testing where you use “Given” for the scenario, “When” for the environment of the action, and “Then” for the action.

Imagine AutoLot, a car dealership chain building an online vehicle marketplace. A product manager, a developer, and a QA engineer sit together and write this scenario in plain English:

Given a customer browsing the SUV category
When the customer clicks "Schedule Test Drive" on a 2024 Honda CR-V
Then the test drive request should appear as "pending" in the customer's dashboard

This is BDD in practice — the three roles agree on the expected behavior before any code is written. The npm package jest-cucumber lets you map these Gherkin-style scenarios directly to Jest tests.

Testing Library vs Enzyme

Fri, 15 Jan 2021 00:00:00 +0000

Introduction

Testing Library is built around a simple philosophy: the more your tests resemble the way your software is used, the more confidence they can give you. Its three core principles are: tests only break when your app breaks (not when implementation details change), you interact with your app the same way as your users, and built-in selectors find elements the way users do to help you write inclusive code.