Senior-Level Understanding of React Portals

preview_player
Показать описание
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 Declarative Paradigm (vs imperative)
02:16 - Issues with Global Modal
03:16 - Tight Coupling
03:48 - What React does when we setState?
04:15 - Colocation
04:44 - The Power of React Portals
05:03 - Ref Forwarding
  1. UI Engineering
  2. React
  3. ReactJS
  4. react.js
  5. Portals
  6. React Portals
Рекомендации по теме
Senior-Level Understanding of 0:05:29

Senior-Level Understanding of React Portals

HARD React Interview 0:06:10

HARD React Interview Questions (3 patterns)

React Portals and 0:14:18

React Portals and Models

Why React portals 0:00:43

Why React portals is important? #shorts

React Portals are 0:00:53

React Portals are an awesome (and underrated) tool for front-end developers 🧙

Forget create-react-app! Use 0:00:28

Forget create-react-app! Use THIS instead!!

React Internals Deep 0:20:03

React Internals Deep Dive 26 - How does Portal work internally?

What are React 0:08:53

What are React Portals and why do we need them? | React Mega Tutorial - Project 4, Part 12

React: Error Boundaries, 1:57:21

React: Error Boundaries, Portals, Custom Hooks & Higher-Order Components Live Class

React Portals - 0:16:08

React Portals - Nir Kaufman @ ReactNYC

The React Interview 0:21:29

The React Interview Questions You need to Know

Create a Modal 0:13:11

Create a Modal With React Portals

React Portals Tutorial: 0:02:19

React Portals Tutorial: How to Add Portals in your app quickly

A Subtle Introduction 0:16:47

A Subtle Introduction to Portals In React by Shedrack Akintayo | JSCAMP 2021

How to create 0:28:24

How to create a modal component in React using React Portals | React Mega Tutorial Project 4 Part 13

Deep dive into 0:31:13

Deep dive into Portals (HSDS React)

Autocomplete / Typeahead 0:00:57

Autocomplete / Typeahead System Design in React JS 🔥🔥 #reactjs #javascript #reactjstutorial

Learn React Hooks: 0:15:46

Learn React Hooks: useContext - Simply Explained!

32 React Authentication 1:17:59

32 React Authentication | Working with Portals | introducing react portals

Fast Food App 0:00:24

Fast Food App in React Native 🔥 #shorts #reactnative #expo #reactjs #app #ui

Understanding React's types 1:20:30

Understanding React's types

Tom Holland react 0:00:14

Tom Holland react to spider Web Shooter🕸🥵

React Lesson - 1:13:50

React Lesson - Modal with Portals

What Is CRM? 0:06:43

What Is CRM? | Introduction To CRM Software| CRM Projects For Beginners | CRM 2022 | Simplilearn

Комментарии
Автор

Thanks for putting what I always argue about into such a short video that uses… well, proper words. I was always about globally state-managed modals to my colleagues. Now I will send this to anyone who (doesn't…) ask :D

HerrSiering
Автор

Great video, I'd love for a deep dive on some react patterns like compound components

Cahnisama
Автор

Świetny materiał, pytanie: czego używasz do animacji i wizualizacji?

ryderzero
Автор

Good video. Very informative. As a React dev though, I disagree with the idea that React's declarative paradigm "simplifies frontend work" especially after you demonstrate an imperative solution that doesn't need "Star Trek technology". It feels to me like Portals are yet another attempt at fixing React's limitations.

netssrmrz