Fantastic closures and how to find them in ReactDeep 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 ReactNadia MakarevichAug 14, 2023
Teleportation in React: Positioning, Stacking Context, and PortalsHow 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 workNadia MakarevichJun 21, 2023
React reconciliation: how it works and why should we careLooking 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.Nadia MakarevichMay 11, 2023
Say no to "flickering" UI: useLayoutEffect, painting and browsers storyHow 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 hereNadia MakarevichApr 20, 2023
Refs in React: from access to DOM to imperative APILooking 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.Nadia MakarevichMar 28, 2023
How to handle errors in React: full guideLooking 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 ErrorBoundaryNadia MakarevichFeb 14, 2023
How to debounce and throttle in React without losing your mindDeep 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 MakarevichJan 5, 2023
Fetching data in React: the case of lost PromisesDeep 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 MakarevichNov 9, 2022
How to fetch data in React with performance in mindDeep 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 MakarevichOct 6, 2022
How it's made: the blog's story and the futureSneak 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 MakarevichSep 20, 2022
PureComponents vs Functional Components with hooksLooking 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 behaviorNadia MakarevichSep 7, 2022
React re-renders guide: everything, all at onceReact 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.Nadia MakarevichAug 2, 2022
The mystery of React Element, children, parents and re-rendersLooking into what is React Element, exploring various children vs parents relationship in React, and how they affect re-rendersNadia MakarevichJul 4, 2022
How to useMemo and useCallback: you can remove most of themWhat 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 MakarevichJun 13, 2022
React project structure for scale: decomposition, layers and hierarchyHow to organize React projects in a way that is scalable, structured, modular, consistent and logical.Nadia MakarevichMay 23, 2022
React key attribute: best practices for performant listsLooking 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 sometimesNadia MakarevichMay 9, 2022
React components composition: how to get it rightWhat 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 MakarevichApr 12, 2022
Implementing advanced usePrevious hook with React useRefLooking 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 MakarevichMar 21, 2022
Higher-Order Components in React Hooks eraWhat 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 MakarevichFeb 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 jobNadia MakarevichFeb 15, 2022
How to write performant React apps with ContextDe-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 MakarevichFeb 7, 2022
Why custom react hooks could destroy your app performanceExploring performance implications of custom React hooks and how not to shoot yourself in the foot when writing or using them.Nadia MakarevichJan 24, 2022
How to write performant React code: rules, patterns, do's and don'tsLooking into patterns that lead to poor performance of React apps, why they are bad, and how to recognise and avoid them.Nadia MakarevichJan 9, 2022
Advanced typescript for React developers - discriminated unionsExploring how to discriminate unions properly and how this pattern can be useful for React developers' everyday professional life.Nadia MakarevichDec 30, 2021
Advanced typescript for React developers - part 3Learning while coding what is the purpose of exhaustiveness checking, how the narrowing of types works and when typescript enums could be useful.Nadia MakarevichDec 20, 2021
Advanced typescript for React developersDiving into advanced typescript concepts and understanding how and why we need things like type guards, keyof, typeof, is, as const and indexed types.Nadia MakarevichDec 8, 2021
Typescript generics for React developersLooking 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 MakarevichNov 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 MakarevichNov 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 MakarevichApr 18, 2021
Three simple tricks to speed up yarn installThose tricks can speed up your yarn install by up to 50%Nadia MakarevichApr 5, 2021
Learning by fixing: Node.js, modules and packagesLearn how Node resolves modules and deals with packages by pretending to be a detective and debugging a mysterious build failureNadia MakarevichFeb 8, 2021
webpack and yarn magic against duplicates in bundlesThis 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 MakarevichJun 11, 2020
