Advanced patterns for Frontend developers.

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

Techstack: React, Typescript, node, monorepos, yarn, webpack, etc.

Get the latest content by email. No spam, ever.

G'day, I'm Nadia

Frontend Architect, coder

Worked on architecture of Jira Frontend monorepo
(300 devs, 2mil lines of code), Atlassian Design systems.
Currently Founding Engineer in Pyn

All posts react performance re-renders composition typescript other

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

Nadia Makarevich

Feb 14, 2023

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.

Nadia Makarevich

Jan 5, 2023

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.

Nadia Makarevich

Nov 9, 2022

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.

Nadia Makarevich

Oct 6, 2022

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!

Nadia Makarevich

Sep 20, 2022

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

Nadia Makarevich

Sep 7, 2022

React re-renders guide: everything, all at once

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

Nadia Makarevich

Aug 2, 2022

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

Nadia Makarevich

Jul 4, 2022

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.

Nadia Makarevich

Jun 13, 2022

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.

Nadia Makarevich

May 23, 2022

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

Nadia Makarevich

May 9, 2022

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?

Nadia Makarevich

Apr 12, 2022

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.

Nadia Makarevich

Mar 21, 2022

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?

Nadia Makarevich

Feb 27, 2022

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

Nadia Makarevich

Feb 15, 2022

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.

Nadia Makarevich

Feb 7, 2022

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.

Nadia Makarevich

Jan 24, 2022

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.

Nadia Makarevich

Jan 9, 2022

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.

Nadia Makarevich

Dec 30, 2021

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.

Nadia Makarevich

Dec 20, 2021

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.

Nadia Makarevich

Dec 8, 2021

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 😉

Nadia Makarevich

Nov 25, 2021

🦘 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.

Nadia Makarevich

Nov 15, 2021

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!

Nadia Makarevich

Apr 18, 2021

Three simple tricks to speed up yarn install

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

Nadia Makarevich

Apr 5, 2021

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

Nadia Makarevich

Feb 8, 2021

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%.

Nadia Makarevich

Jun 11, 2020

Contact

General