Page 14 - React

React

AI generated

React key Prop Pitfalls: Why Index as Key Is Often Wrong

Maxim Mironjuk - March 17, 2025

Using the array index as a key value seems to work fine, until a list gets sorted, filtered, or modified. Then React recycles internal component state between the wrong elements, sometimes with serious, hard-to-trace consequences.

React GraphQl

AI generated

Apollo Client Cache: Normalization and Update Strategies

Maxim Mironjuk - March 14, 2025

The Apollo Client Cache is far more than a plain response store: it normalizes every object by __typename and id into a flat graph, keeps queries consistently in sync, and allows targeted updates without a refetch. Anyone who understands typePolicies, cache.modify, and optimistic responses builds noticeably faster and more consistent React applications.

JavaScript React

AI generated

Module Federation and Micro-Frontends in JavaScript

Maxim Mironjuk - March 12, 2025

Module Federation in Webpack 5 solves what has long been the hardest problem in micro-frontend architectures: how multiple independent teams can combine their JavaScript bundles at runtime, without loading shared dependencies multiple times or sharing a central build pipeline.

React

AI generated

React DevTools Component Highlighting: Spot Unnecessary Re-Renders Visually

Maxim Mironjuk - March 09, 2025

Before you open the Profiler tab and start a recording, unnecessary re-renders can often be made visible with a single click. The React DevTools option Highlight updates when components render colors every component the moment its render function runs, live in the browser as you click, type, and navigate.

React Barrierefreiheit

AI generated

Focus Traps and Accessible Modals in React: The Complete Guide

Maxim Mironjuk - March 08, 2025

A modal without a focus trap lets keyboard users disappear into the background while the dialog sits visually in front. This guide shows how to implement a custom focus trap in React, set ARIA attributes correctly, and reliably restore focus after closing, all without a ready made library.

React Design Patterns

AI generated

Headless UI Patterns in React: Beyond Radix

Maxim Mironjuk - March 06, 2025

Headless UI patterns consistently separate interaction logic from visual presentation, so teams can implement their own design without compromising keyboard control or ARIA semantics. Once you understand how custom hooks, compound components and state machines work together, many use cases no longer need an external headless library at all.

React TypeScript

AI generated

Composing React Context Providers Without Provider Hell

Maxim Mironjuk - March 06, 2025

Every new global state, whether theme, authentication, or feature flags, tends to add another layer of nested context providers around a React application's root. This article shows how to replace that deeply nested Provider Hell with a composable AppProviders pattern, including provider order, memoization, TypeScript typing, and testing.

React Testing/E2E TypeScript

AI generated

React Design Pattern: Custom Hook Extraction

Maxim Mironjuk - March 06, 2025

Components that handle data fetching, form validation and UI state all at once are hard to test, hard to maintain and hard to reuse. Custom Hook Extraction is the fundamental React pattern that separates logic from presentation, making both better at the same time.

React

AI generated

React Native vs PWA: A Decision Guide for Teams

Maxim Mironjuk - March 04, 2025

The question of React Native versus PWA cannot be answered in general terms, it depends on concrete product requirements: app store visibility, access to native hardware, offline behavior and available budget. This article provides a structured decision framework based on real technical limits rather than marketing promises.

React TypeScript

AI generated

React 19 Hooks Cheat Sheet: All Hooks and When to Use Them

Maxim Mironjuk - March 03, 2025

React 19 brings new hooks and refines existing ones, but the biggest problem in practice is not a lack of knowledge, it is the wrong choice: useEffect where useRef would suffice, useMemo where no memoizing is needed at all. This cheat sheet gives clear decision rules for when which React hook is the right one.