Developer Way
Advanced React BookAuthor
Follow on LinkedInFollow on TwitterFollow on BlueskyRSS Feed
What is happening under the hood?

Advanced patterns for React developers

Improve your technical skills with in-depth explanations, practical advices and useful tips and tricks.

      Subscribe to receive notifications about exclusive sales discounts, latest articles, upcoming courses, and other updates. Unsubscribe at any time.

    f1
    f2
    f3
    f4
    • react
    • performance
    • re-renders
    • composition
    • typescript
    • css
    • other
    Tailwind vs Linaria: Performance Investigation
    17-04-2025Nadia Makarevich

    Tailwind vs Linaria: Performance Investigation

    Investigating performance of Tailwind vs Linaria frameworks, with a focus on initial load and interaction performance.

    • react
    • performance
    • css
    SSR Deep Dive for React Developers
    17-03-2025Nadia Makarevich

    SSR Deep Dive for React Developers

    Explore step-by-step how Server-Side Rendering (SSR), pre-rendering, hydration, and Static Site Generation (SSG) work in React, their costs, performance impact, benefits, and trade-offs.

    • react
    • performance
    Client-Side Rendering in Flame Graphs
    18-02-2025Nadia Makarevich

    Client-Side Rendering in Flame Graphs

    Intro to Performance Flame Graphs. Learn how to read and extract useful info from performance flame graphs while exploring how the Client-Side rendering works in React applications.

    • react
    • performance
    Initial load performance for React developers: investigative deep dive
    21-01-2025Nadia Makarevich

    Initial load performance for React developers: investigative deep dive

    Exploring Core Web Vitals, Chrome performance panel, what initial load performance is, which metrics measure it, and how cache control and different networking conditions influence it.

    • react
    • performance
    How React Compiler Performs on Real Code
    04-12-2024Nadia Makarevich

    How React Compiler Performs on Real Code

    Exploring the impact of React Compiler on initial load and interaction performance. With numbers. Measured on a real app.

    • react
    • performance
    Existential React questions and a perfect Modal Dialog
    25-11-2024Nadia Makarevich

    Existential React questions and a perfect Modal Dialog

    My step-by-step process for implementing a new feature from an idea to a production-ready solution using Modal Dialog as an example.

    • react
    • composition
    Intro to CSS animations for React developers
    01-10-2024Nadia Makarevich

    Intro to CSS animations for React developers

    Investigating CSS animations in React by building some useful components like slide-in drawers, expandable search field, and fancy hover effects.

    • react
    • css
    Replacing React code with CSS :has selector
    09-09-2024Nadia Makarevich

    Replacing React code with CSS :has selector

    Looking into what the new CSS :has selector is and how it can be used to improve our React code. Includes practical and beautiful examples.

    • react
    • css
    I tried React Compiler today, and guess what... 😉
    05-06-2024Nadia Makarevich

    I tried React Compiler today, and guess what... 😉

    Investigating whether we can forget about memoization in React, now that the React Compiler is open-sourced.

    • react
    • performance
    React Compiler & React 19 - forget about memoization soon?
    11-03-2024Nadia Makarevich

    React Compiler & React 19 - forget about memoization soon?

    Did you know that React Compiler is not actually React 19? But when can we expect it then and forget about memo in React? And what exactly will change when the Compiler is released?

    • react
    React useTransition: performance game changer or...?
    16-10-2023Nadia Makarevich

    React useTransition: performance game changer or...?

    Looking into what React Concurrent Rendering is, what hooks like useTransition and useDeferredValue do, what are the benefits and downsides of using them.

    • react
    • performance
    Fantastic closures and how to find them in React
    14-08-2023Nadia Makarevich

    Fantastic closures and how to find them in React

    Deep dive into closures in JavaScript and React: how they appear, why we need them, what stale closures are, and how to prevent and fix them in React

    • react
    • performance
    Teleportation in React: Positioning, Stacking Context, and Portals
    21-06-2023Nadia Makarevich

    Teleportation in React: Positioning, Stacking Context, and Portals

    How CSS positioning works, what is Stacking Context, how to escape overflow:hidden with CSS, why we can't do everything with CSS and need Portals, how Portals work

    • react
    • composition
    React reconciliation: how it works and why should we care
    11-05-2023Nadia Makarevich

    React reconciliation: how it works and why should we care

    Looking in detail into how React reconciliation algorithm works. Explore in the process quirks of conditional rendering, the 'key' attribute, and why we shouldn't declare components inside other components.

    • react
    • performance
    • re-renders
    • composition
    Say no to "flickering" UI: useLayoutEffect, painting and browsers story
    20-04-2023Nadia Makarevich

    Say no to "flickering" UI: useLayoutEffect, painting and browsers story

    How to change elements base on DOM measurements: what is the problem with useEffect, how useLayoutEffect fixes it, what is browser painting, and how SSR plays a role here

    • react
    • performance
    Refs in React: from access to DOM to imperative API
    28-03-2023Nadia Makarevich

    Refs in React: from access to DOM to imperative API

    Looking into why we need access to DOM in React, how Refs can help with that, what are useRef, forwardRef and useImperativeHandle hooks, and how to use them properly.

    • react
    How to handle errors in React: full guide
    14-02-2023Nadia Makarevich

    How to handle errors in React: full guide

    Looking into how to catch and handle errors in React: usages, patterns and caveats of try/catch and ErrorBoundary, what's possible, what's not, and how to catch async errors with ErrorBoundary

    • react
    How to debounce and throttle in React without losing your mind
    05-01-2023Nadia Makarevich

    How to debounce and throttle in React without losing your mind

    Deep dive into debounce and throttle in React. What is debounce and throttle, how to use them in React properly, how to avoid breaking them when state and re-renders are involved.

    • react
    • performance
    Fetching data in React: the case of lost Promises
    09-11-2022Nadia Makarevich

    Fetching data in React: the case of lost Promises

    Deep dive into Promises and data fetching in React: what is a Promise, how and why Promises can cause race conditions and what to do about it.

    • react
    How to fetch data in React with performance in mind
    06-10-2022Nadia Makarevich

    How to fetch data in React with performance in mind

    Deep dive into data fetching in React. What is performance, fundamental libraries-agnostic patterns and techniques, how react lifecycle and browser limitations affect data fetching and apps rendering time and order.

    • react
    • performance
    How it's made: the blog's story and the future
    20-09-2022Nadia Makarevich

    How it's made: the blog's story and the future

    Sneak peek behind the scenes. How the blog has started, how I come up with the ideas, how the blog is promoted, the money question: present and future. And the secret of the cats of course!

    • other
    PureComponents vs Functional Components with hooks
    07-09-2022Nadia Makarevich

    PureComponents vs Functional Components with hooks

    Looking into PureComponent and the problem it solved, how it can be replaced now in the hooks & functional components world, and discovering an interesting quirk of React re-renders behavior

    • react
    • performance
    React re-renders guide: everything, all at once
    02-08-2022Nadia Makarevich

    React re-renders guide: everything, all at once

    React re-renders "cheatsheet". Short descriptions with visual aid and code examples of: what re-renders are, what triggers them, most important re-renders related patterns and antipatterns to remember.

    • react
    • performance
    • re-renders
    • composition
    The mystery of React Element, children, parents and re-renders
    04-07-2022Nadia Makarevich

    The mystery of React Element, children, parents and re-renders

    Looking into what is React Element, exploring various children vs parents relationship in React, and how they affect re-renders

    • react
    • composition
    • re-renders
    • performance
    How to useMemo and useCallback: you can remove most of them
    13-06-2022Nadia Makarevich

    How to useMemo and useCallback: you can remove most of them

    What is the purpose of useMemo and useCallback hooks, mistakes and best practices in using them, and why removing most of them might be a good idea.

    • react
    • performance
    • re-renders
    React project structure for scale: decomposition, layers and hierarchy
    23-05-2022Nadia Makarevich

    React project structure for scale: decomposition, layers and hierarchy

    How to organize React projects in a way that is scalable, structured, modular, consistent and logical.

    • react
    • other
    React key attribute: best practices for performant lists
    09-05-2022Nadia Makarevich

    React key attribute: best practices for performant lists

    Looking into how React "key" attribute works, how to use it correctly, how to improve performance of lists with it, and why array index as key is a good idea sometimes

    • react
    • performance
    • re-renders
    React components composition: how to get it right
    12-04-2022Nadia Makarevich

    React components composition: how to get it right

    What is components composition? How do you know when to start splitting a big component into smaller pieces and how to compose them properly? What makes a good component?

    • react
    • composition
    Implementing advanced usePrevious hook with React useRef
    21-03-2022Nadia Makarevich

    Implementing advanced usePrevious hook with React useRef

    Looking into how refs work when not attached to DOM and how to use them to implement advanced usePrevious hook to get the previous state or props value.

    • react
    Higher-Order Components in React Hooks era
    27-02-2022Nadia Makarevich

    Higher-Order Components in React Hooks era

    What is a React higher-order component? How it can be used and why? And do we still need them in modern apps in React hooks era?

    • react
    • composition
    React component as prop: the right way™️
    15-02-2022Nadia Makarevich

    React component as prop: the right way™️

    Exploring how to pass React components as props, why we would want to do it, and what is the best pattern for the job

    • react
    • composition
    How to write performant React apps with Context
    07-02-2022Nadia Makarevich

    How to write performant React apps with Context

    De-mystifying Context and its influence on React apps' performance. Learning a few useful patterns in the process, that could help minimize the re-renders impact and improve code's readability and scalability.

    • react
    • performance
    Why custom react hooks could destroy your app performance
    24-01-2022Nadia Makarevich

    Why custom react hooks could destroy your app performance

    Exploring performance implications of custom React hooks and how not to shoot yourself in the foot when writing or using them.

    • react
    • performance
    • re-renders
    How to write performant React code: rules, patterns, do's and don'ts
    09-01-2022Nadia Makarevich

    How to write performant React code: rules, patterns, do's and don'ts

    Looking into patterns that lead to poor performance of React apps, why they are bad, and how to recognise and avoid them.

    • react
    • performance
    • re-renders
    • composition
    Advanced typescript for React developers - discriminated unions
    30-12-2021Nadia Makarevich

    Advanced typescript for React developers - discriminated unions

    Exploring how to discriminate unions properly and how this pattern can be useful for React developers' everyday professional life.

    • typescript
    • react
    Advanced typescript for React developers - part 3
    20-12-2021Nadia Makarevich

    Advanced typescript for React developers - part 3

    Learning while coding what is the purpose of exhaustiveness checking, how the narrowing of types works and when typescript enums could be useful.

    • typescript
    • react
    Advanced typescript for React developers
    08-12-2021Nadia Makarevich

    Advanced typescript for React developers

    Diving into advanced typescript concepts and understanding how and why we need things like type guards, keyof, typeof, is, as const and indexed types.

    • typescript
    • react
    Typescript generics for React developers
    25-11-2021Nadia Makarevich

    Typescript generics for React developers

    Looking into why we need generics in Typescript, and how to use them to develop re-usable React components. And as a bonus: the secret of React hooks 😉

    • typescript
    🦘 Prison break, or solving life like a developer️
    15-11-2021Nadia Makarevich

    🦘 Prison break, or solving life like a developer️

    How would you deal with something like relocating to another country and becoming digital nomad? A story on how I took approach that I would use as a developer with large projects at work.

    • other
    Custom eslint rules + typescript monorepo = ❤️
    18-04-2021Nadia Makarevich

    Custom eslint rules + typescript monorepo = ❤️

    A simple trick that allows you to write in typescript and consume right away custom eslint rules. No compilation, build or publish/link step, just write code and use it!

    • other
    Three simple tricks to speed up yarn install
    05-04-2021Nadia Makarevich

    Three simple tricks to speed up yarn install

    Those tricks can speed up your yarn install by up to 50%

    • other
    Learning by fixing: Node.js, modules and packages
    08-02-2021Nadia Makarevich

    Learning by fixing: Node.js, modules and packages

    Learn how Node resolves modules and deals with packages by pretending to be a detective and debugging a mysterious build failure

    • other
    webpack and yarn magic against duplicates in bundles
    11-06-2020Nadia Makarevich

    webpack and yarn magic against duplicates in bundles

    This page describes the theory and some technical details behind the webpack-deduplication-plugin plugin, which helped us reduce javascript size in Jira by ~10%.

    • other

    © Developer Way

    Important links

    • Privacy policy
    • Terms & Conditions
    • Contact

    Stay up to date

    Subscribe to receive notifications about exclusive sales discounts, upcoming courses, and other product updates. Unsubscribe at any time.