§ React

When working with complex GraphQL schemas, it's common to have shared fields across different types. A fragment colocation pattern allows us to define fragments alongside their corresponding components, resulting in a more cohesive and maintainable codebase.

A fragment colocation pattern with React & Apollo GraphQL

This article provides a step-by-step guide on how to build polymorphic React components with Typescript, covering the necessary concepts and techniques to create flexible and reusable components.

Build polymorphic React components with Typescript

Optimize JavaScript performance with code splitting techniques like route-based splitting, lazy loading, and dynamic imports

Code splitting

Code splitting in React

Learn React composition patterns with coverage of HOCs, render props, compound components, and custom hook

Component composition patterns

Component composition patterns in React

Learn how to integrate design systems in React applications with comprehensive coverage of design tokens, atomic components, and accessibility standards.

Design system integration

Design system integration in React

Learn effective React testing methods including unit tests with react-testing-library, hook testing with react-hooks-testing-library, and end-to-end tests with Cypress for reliable carousel component validation.

Different ways to test React application

Learn how to refactor React.js components using HOC, render props, and hooks to create reusable toggle logic that follows the DRY principle and simplifies state management.

Hoc renderprops and hook in Reactjs

React hooks architecture with in-depth coverage of custom hooks, state management, and side effects handling.

Hook architecture

Hook architecture in React

What happens if you invoked the component function directly in React?

Invoking component functions in React

State in React is tied to a position in the UI tree.

Preserving and resetting state in React

React 18 was released in March 2022. This release focuses on performance improvements and updating the rendering engine.

React 18

Fiber is the new reconciliation algorithm since React 16, a completely backward-compatible rewrite of the old reconciler (Stack Reconciler).

React fiber

React Server Components (RSCs) offer the flexibility to decide where to render components based on their purpose, diverging from the client-side rendering approach of Single-Page Applications.

React server components, NextJs route and data fetching

React rendering strategies with in-depth coverage of client-side rendering (CSR), server-side rendering (SSR), and static site generation (SSG).

Rendering strategies

Rendering strategies in React

Discover state management strategies, best practices, and when to use each approach for scalable, efficient React applications

State management strategy

State management strategy in React

Frontend development has become increasingly complex over the years, and with it, the need for efficient state management.

Tackling server state complexity in frontend development

React testing with unit, integration, and end-to-end approaches

Testing strategies

Testing strategies in React

In the React 18 version, the `useEffect` hook has been updated to called twice compare to only one in the older version in StrictMode.

UseEffect double calls in React 18

Imagine we have a component with multiple states. It is simple enough not to use state management libraries. `useState` is surely a choice for the sake of brevity and clarity. But are there any issues we have to deal with? In this article, I want to make some improvements on `useState` hook and how we can replace it with `useReducer` as an alternative solution.

When should we use useReducer instead of useState?

React and Vue, two popular front-end frameworks, both use Virtual DOM to improve page rendering efficiency. Understanding the concept of Virtual DOM sheds light on an important aspect of performance optimization on the client side.

#react

A

B

C

D

H

I

P

R

S

T

U

W