- Видео 20
- Просмотров 89 550
UI Engineering
Польша
Добавлен 10 июн 2023
Web dev, React and stuff
Why "Stale Closure" Misleads React Devs
What closures have to do with React? How it's one of the most misunderstood topics in the React Community? Discussing why the term "Stale Closure" is confusing and inaccurate and it's only mentioned in the context of React.
My newsletter recommendation: (not sponsored, I just like them)
⚛️ This Week in React
thisweekinreact.com/
⏱️ Timestamps:
00:00 - #1 React question on StackOverflow
00:30 - Stale Closure Concept
00:56 - Is it only a React issue?
01:14 - The Canonical Problem
01:36 - The Popular Misconception
02:20 - MDN: Closures definition
03:26 - Where we use closures
03:52 - Closures don't freeze values
05:14 - The Real Reason behind stale values
07:39 - Vanilla JS example
08:48 - Disclaimer on se...
My newsletter recommendation: (not sponsored, I just like them)
⚛️ This Week in React
thisweekinreact.com/
⏱️ Timestamps:
00:00 - #1 React question on StackOverflow
00:30 - Stale Closure Concept
00:56 - Is it only a React issue?
01:14 - The Canonical Problem
01:36 - The Popular Misconception
02:20 - MDN: Closures definition
03:26 - Where we use closures
03:52 - Closures don't freeze values
05:14 - The Real Reason behind stale values
07:39 - Vanilla JS example
08:48 - Disclaimer on se...
Просмотров: 3 245
Видео
Making setState() instant
Просмотров 7 тыс.2 месяца назад
Why setState() in React.js is not immediate? Can we make it to update the state instantly? Deep dive into how useState() works and how we can write our own better version. My newsletter recommendation: (not sponsored) ⚛️ This Week in React thisweekinreact.com/ ⏱️ Timestamps: 00:00 - StackOverflow question 00:24 - useSyncState() hook 00:48 - Disclaimer 01:03 - Why setState is not SYNC? 01:34 - W...
I realized Lifting State Up doesn't make sense (in some cases)
Просмотров 2,3 тыс.2 месяца назад
In React.js it's a common practice to "Lift State Up". But there are cases when it can hurt your app. ⚛️ This Week in React: thisweekinreact.com/ ⏱️ Timestamps: 00:00 - Disclaimer 00:13 - The Flaws 00:24 - Rethinking Best Practices 00:36 - The Example 01:10 - Re-render's Hell 01:57 - The Key Observation 02:18 - The Pattern 03:24 - The Benefits 04:42 - The Counter-Argument 05:59 - React Docs Mis...
Why React is Declarative?
Просмотров 1,6 тыс.3 месяца назад
Diving into the declarative vs imperative in context of React. Why React is declarative? Does it make it better than the alternatives? ⚛️ This Week in React: thisweekinreact.com/ ⏱️ Timestamps: 00:00 - What else is declarative? 00:27 - List of Contents 00:43 - Chapter I: The False Battle of Declarative vs Imperative 01:20 - Language Classification vs Programming Style 01:35 - Natural Language 0...
Portals Can Share State Between Windows
Просмотров 17 тыс.5 месяцев назад
How to share state between 2 different windows using React Portals. ⏱️Timestamps: 00:00 - Intro 00:16 - Why Portals exists 00:38 - Sharing State with Portals 01:04 - How does it work 02:38 - Rendering to a new window 02:59 - Portals insight 03:25 - Consequences 03:39 - When it's useful 04:29 - Document Picture in Picture API 05:13 - Important Limitation Further reading and Acknowledgments: - D...
Why 95% of Modals should be Local (in React)
Просмотров 12 тыс.5 месяцев назад
Global vs Local Modals - it is a great architectural question that you should answer when coding your app. ⏱️Timestamps: 00:00 - z-index stacking issue 00:19 - React Portals 00:27 - Global Modal Architecture Trend 01:08 - Modal's Law 01:22 - Problems with Local Modals 02:10 - Global Modal comparison 02:33 - "Dumb" Implementation 03:09 - "Sophisticated" Implementation 05:05 - Global vs Local Mod...
Senior-Level Understanding of React Portals
Просмотров 1,3 тыс.7 месяцев назад
Understanding architectural layer of React Portals. How declarative paradigm, unidirectional data flow and state colocation makes Portals great. ⏱️Timestamps: 00:00 - Classical Example 00:20 - Portals are not about CSS 00:33 - Popular workaround with Global Modal 00:40 - Architectural Layer of React Portals 00:58 - The Root Problem 01:22 - React's Declarative Paradigm 01:39 - Hidden cost of Dec...
Aceternity UI: Performance, Usability and Accessibility Review
Просмотров 4,6 тыс.8 месяцев назад
Let's explore Aceternity UI in more depth, we will discuss: tech stack, license, dark mode, performance, functionality, accessibility and responsiveness. Aceternity UI is a great new, free and open-source UI library that is taking the frontend world by the storm. ⏱️Timestamps: 00:00 - What we will cover 00:25 - Tech Stack - Next.js, React, dependencies 01:20 - Dark Mode 01:30 - Aceternity Studi...
Can you assign setState to ref attribute?
Просмотров 5488 месяцев назад
What setState and refCallback have in common? Unintuitive React Pattern that can help synchronize DOM Elements with Render Cycle. ⏱️Timestamps: 00:00 - Why assigning setState in ref is unintuitive 01:00 - Example from Popper.js 02:27 - How does it work? 03:08 - Is it safe? 05:24 - Is it breaking React Rules? 06:57 - Why would you want to use it? 09:31 - Lessons learned: When to use it Acknowle...
Mental Model for Ref Callbacks
Просмотров 4069 месяцев назад
Why do we need Ref Callbacks in React? ⏱️Timestamps: 00:00 - RefObject vs RefCallback 00:58 - When useEffect might not work 02:56 - Why using effect is a wrong tool for DOM Logic synchronization 04:06 - Fixing referential stability for Ref Callbacks 06:28 - Cleanup Functions for Ref Callbacks Acknowledgments and further reading: Ref Callbacks Cleanup Function: - Merged RFC: github.com/facebook...
Goodbye, forwardRef
Просмотров 9 тыс.9 месяцев назад
Goodbye, forwardRef - The drama in 5 acts. (reuploaded, audio sync fixed) Resources: Docs: - react.dev/reference/react/forwardRef - legacy.reactjs.org/docs/forwarding-refs.html RFCs: - github.com/reactjs/rfcs/blob/main/text/0030-ref-forwarding.md - github.com/reactjs/rfcs/pull/107#issuecomment-466304382 - github.com/facebook/react/issues/6974 GitHub Discussions: - github.com/facebook/react/iss...
Essential React: 5 Mistakes to Master React DOM Refs
Просмотров 44411 месяцев назад
#reactjs Guide through most common mistakes when using Refs to manipulate DOM in React. Concepts: - Why to use Refs, not DOM API selectors? - What is render and commit phase in React? - Why refs are called an escape hatch? - What aspects of DOM should be controlled by state and refs? ⏱️Timestamps: 00:00 - Video Outline 00:31 - Mistake #1 - Using DOM API selectors to query for DOM nodes 01:46 -...
Complete useRef Summary in 2 minutes
Просмотров 378Год назад
React useRef hook summarized in 2 minutes. Covering API, real use cases and basic mistakes. It should be enough to get you started! ⏱️ Timestamps: 00:00 - Introduction 00:24 - Persisting values in Refs 01:19 - Persisting DOM nodes in Refs Concepts: - How to use the useRef hook - What refs are used for - Common mistake when persisting values in refs - Why refs are useful if we already can persi...
Ref vs State: One Key Insight to easily remember the differences
Просмотров 571Год назад
#reactjs Ref and State have something in common. Understanding that is the key to easily remember differences between them ;) Inspiration from React docs: react.dev/learn/referencing-values-with-refs#how-does-use-ref-work-inside ⏱️Timestamps: 00:00 - Introduction 00:40 - State vs Local Variable 01:25 - Ref and State - Common Part 01:51 - useCustomRef implementation 02:19 - Comparing useRef vs u...
How React's setState is evaluated | 2023 React Interview Questions and Answers
Просмотров 3,2 тыс.Год назад
If you are preparing for 2023 React Interview, it might be worth to go deep into the execution of setState() function. Why setState is not updating immediately? Why we should use callback setter function in setState? Why using 2 setState in the row is not the best idea? setState asynchronicity is an important idea in React, and I'll try to do my best to help you understand how it really works. ...
Why React uses className? | 2023 React Interview Questions and Answers
Просмотров 20 тыс.Год назад
Why React uses className? | 2023 React Interview Questions and Answers