Subscribe here

SLIDES FOR
THEORY
LECTURES
DON’T SKIP THEM, THEY ARE
SUPER IMPORTANT 🤓)

Follow me here
(
 📖 TABLE OF CONTENTS THEORY LECTURES CLICK THE TITLES

1 Watch Before You Start! 14 State vs. Props 27 How Diffing Works

2 Why Do front-end Frameworks exist? 15 What is "Thinking in React"? 28 The Key Prop

3 What is React? 16 Fundamentals of State Management 29 Rules for Render Logic: Pure components

4 Setting Up a New React Project: The Two Options 17 Derived State 30 State Update Batching

5 Components as Building Blocks 18 The children Prop: Making a Reusable Button 31 How Events Work in React

6 What is JSX? 19 How to Split a UI Into Components 32 Libraries vs. Frameworks & The React Ecosystem

7 Separation of Concerns 20 Component Categories 33 Section Summary: Practical Takeaways

8 Props, Immutability, and One-Way Data Flow 21 Component Composition 34 The Component Lifecycle

9 The Rules of JSX 22 Props as a Component API 35 A First Look at Effects

10 Section Summary 23 Components, Instances, and Elements 36 The useEffect Dependency Array

11 What is State in React? 24 How Rendering Works: Overview 37 The useEffect Cleanup Function

12 The Mechanics of State 25 How Rendering Works: The Render Phase 38 React Hooks and Their Rules

13 More Thoughts About State State Guidelines 26 How Rendering Works: The Commit Phase 39 useState Summary
+
:
(
)
 📖 TABLE OF CONTENTS THEORY LECTURES CLICK THE TITLES

40 Introducing Another Hook: useRef 53 Don't Optimize Prematurely! 66 An Overview of Server-Side Rendering SSR

41 What are Custom Hooks? When to Create One? 54 useEffect Rules and Best Practices 67 The Missing Piece: Hydration

42 Class Components vs. Function Components 55 Introduction to Redux 68 What is Next.js?

43 Managing State With useReducer 56 Redux Middleware and thunks 69 What are React Server Components? RSC Part 1

44 Section Summary: useState vs. useReducer 57 What is Redux Toolkit RTK ? 70 How RSC Works Behind the Scenes RSC Part 2

45 Routing and Single-Page Applications SPAs) 58 Redux vs. Context API 71 RSC vs. SSR How are They Related? RSC Part 3

46 Styling Options For React Applications 59 Application Planning (“Fast React Pizza Co.”) 72 Project Planning: "The Wild Oasis" Website

47 What is the Context API? 60 What is Tailwind CSS? 73 What is React Suspense?

48 Thinking In React: Advanced State Management 61 Application Planning (“The Wild Oasis”) 74 Types of SSR Static vs. Dynamic Rendering

49 Performance Optimization and Wasted Renders 62 What is Supabase? 75 Partial Pre-Rendering

50 Understanding memo 63 Modeling Application State 76 How Next.js Caches Data

51 Understanding useMemo and useCallback 64 What is React Query? 77 Blurring the Boundary Between Server and Client

52 Optimizing Bundle Size With Code Splitting 65 An Overview of Reusability in React 78 What is Middleware in Next.js?

79 What are Server Actions?

:
:
(
)
(
(
(
(
(
)
)
)
)
:
(
)
WELCOME, WELCOME,
WELCOME!
SECTION
WELCOME, WELCOME, WELCOME!

LECTURE
WATCH BEFORE YOU START!
SOME QUICK CONSIDERATIONS BEFORE WE START... 🚀

✌ This course is for everyone! So please don’t write a bad review right away if the course is too easy,
or too hard, or progressing too slow, or too fast for you

✌ To make the course perfect for YOU rewatch lectures, jump to other sections, watch the course
with slower or faster speed, or ask questions

Please don’t be that person. Everyone

is different... Unless the course is
truly terrible (it’s not 😛)
:
SOME QUICK CONSIDERATIONS BEFORE WE START... 🚀

😱 You don’t need to watch the entire course in order to learn React! If you are in a hurry, can cut the
course length in HALF by skipping optional sections and practice parts
SOME QUICK CONSIDERATIONS BEFORE WE START... 🚀

👩💻 You need to code along with me! You will learn ZERO React skills by just sitting and watching me
code. You really have to write code YOURSELF!
SOME QUICK CONSIDERATIONS BEFORE WE START... 🚀

😅 In the first sections of the course, don’t worry about WHY and HOW things work, or about React
“best practices”. While learning, we just want to make things WORK. We will worry about everything
else later in the course
SOME QUICK CONSIDERATIONS BEFORE WE START... 🚀

⁉ If you have a problem or a question, start by trying to solve it yourself! This is essential for your
progress. If you can’t solve it, check the Q&A section. If that doesn’t help, you can ask a new
question. Use a short description, and post code on codesandbox.io

3
SOME QUICK CONSIDERATIONS BEFORE WE START... 🚀

⏳ Before moving on from a section, make sure that you understand exactly what was covered. Take
a break, review the code we wrote, review your notes, review the projects we built, and maybe even
write some code yourself

✅ ✅ ✅
SOME QUICK CONSIDERATIONS BEFORE WE START... 🚀

🖥 I recorded this course on a Mac, but everything works the exact same way on Windows or Linux.
If something doesn’t work on your computer, it’s NOT because you’re using a different OS
SOME QUICK CONSIDERATIONS BEFORE WE START... 🚀

😍 Most importantly, have fun! It’s so rewarding to see an app come to life that YOU have built YOURSELF!
So if you’re feeling frustrated, stop whatever you’re doing, and come back later!

And I mean REAL fun 😅

 PART 01
—
REACT
FUNDAMENTALS
A FIRST LOOK AT
REACT
 SECTION
A FIRST LOOK AT REACT

LECTURE
WHY DO FRONT END
FRAMEWORKS EXIST?
-
THE RISE OF SINGLE PAGE APPLICATIONS
The “old” way (but now
getting modern again…) SERVER SIDE RENDERING

VIEW

RENDER
BROWSER
WEBPAGE

DATA

👉 Developers started writing more

🌐 SERVER / BACK END 👩💻 CLIENT / FRONT END and more JS code, which led to…

The “modern” way CLIENT SIDE RENDERING

DATA RENDER
API BROWSER
WEBPAGE

VIEW
👉 Single-Page Application SPA
-
-
-
-
(
)
-
SINGLE PAGE APPLICATIONS WITH VANILLA JAVASCRIPT?

👉 Front-end web applications are all about…

Handling data + displaying

data in a user interface

User interface needs to

DATA UI
stay in sync with data

Very hard problem to solve!

-
KEEPING UI IN SYNC WITH DATA

DATA
DATA

DATA
DATA

?? ☝ Keeping UI
and data in sync
would be virtually
impossible with
just vanilla
JavaScript

Piece of data
=
Piece of state
SINGLE PAGE APPLICATIONS WITH VANILLA JAVASCRIPT?

👉 Front-end web applications are all about…

PROBLEMS WITH

Handling data + displaying Requires lots of direct DOM manipulation and

1
data in a user interface traversing (imperative) 👉 “Spaghetti code” 🍝

User interface needs to

DATA UI
stay in sync with data

Very hard problem to solve!

Data (state) is usually stored in the DOM, shared
2
across entire app 👉 Hard to reason + bugs 🐛
-
WHY DO FRONT END FRAMEWORKS EXIST?

1 JavaScript front-end frameworks exist because…

KEEPING A USER INTERFACE IN SYNC WITH DATA

DATA UI
IS REALLY HARD AND A LOT OF WORK

Front-end frameworks solve this problem and take hard work away from developers 🎉

Different approaches, same goal

They enforce a “correct” way of structuring and writing code (therefore contributing to
2
solving the problem of “spaghetti code” 🍝)

3 They give developers and teams a consistent way of building front-end applications
-
SECTION
A FIRST LOOK AT REACT

LECTURE
WHAT IS REACT?
WHAT IS REACT?

REACT

JAVASCRIPT LIBRARY FOR BUILDING

USER INTERFACES
WHAT IS REACT?

REACT

EXTREMELY POPULAR, DECLARATIVE,

COMPONENT BASED, STATE DRIVEN JAVASCRIPT
LIBRARY FOR BUILDING USER INTERFACES,
CREATED BY FACEBOOK 🤔 🤯 🤣
-
-
REACT IS BASED ON COMPONENTS

👉 Components are the building blocks of user interfaces in React

Based on components

Component 1
Component 2 Webpage
Declarative Component 3

State-driven 👉 We build complex UIs by building and combining multiple components

JavaScript library

Extremely popular

Created by facebook
REACT IS BASED ON COMPONENTS

NavBar Search
Based on components

Results
Declarative

Listing
State-driven

JavaScript library
Listing

Extremely popular

Listing
Created by facebook Map
 REACT IS DECLARATIVE

Based on components
👉 We describe how components
look like and how they work using
JSX returned from a component
Declarative a declarative syntax called JSX

👉 Declarative: telling React what a

State-driven component should look like,

based on current data/state

👉 React is abstraction away from

JavaScript library
DOM we never touch the DOM

👉 JSX a syntax that combines

Extremely popular
HTML, CSS, JavaScript, as well as
referencing other components
Created by facebook
:
:
 REACT IS STATE DRIVEN

Example: array Components

Based on components of apartments written with JSX

1 RENDER
Declarative STATE UI
4 RE RENDER Search apartments

State-driven 2

3 UPDATE STATE

JavaScript library

Extremely popular
REACT REACTS TO STATE CHANGES
BY RE RENDERING THE UI
Created by facebook
-
-
-
REACT IS A JAVASCRIPT LIBRARY

Based on components

🤔 Is React a library or a framework?

Declarative

Because React is only the “view” layer. We

State-driven need to pick multiple external libraries to
build a complete application

JavaScript library

Extremely popular

Created by facebook Complete frameworks built on top of React

 REACT IS EXTREMELY POPULAR

Based on components
React is extremely
popular

Declarative

State-driven
Weekly downloads from NPM

JavaScript library ✅ Many large companies have adopted React

✅ Huge job market with high demand for React developers 🤑

Extremely popular
✅ Large and vibrant React developer community

Created by facebook
✅ Gigantic third-party library ecosystem
(
)
REACT WAS CREATED BY FACEBOOK

Based on components

Declarative

State-driven

👉 React was created in 2011 by Jordan Walke, an

JavaScript library
engineer working at Facebook at the time

👉 React was open-sourced in 2013, and has since

Extremely popular
then completely transformed front-end web
development

Created by facebook
 🎯 SUMMARY

1 Rendering components on a webpage UI based on their current state

2 Keeping the UI in sync with state, by re-rendering (reacting) when state changes

RE RENDER
Component 1

Component 2

Component 3

RENDER
-
(
)
 SECTION
A FIRST LOOK AT REACT

LECTURE
SETTING UP A NEW REACT
PROJECT THE TWO OPTIONS
:
 THE TWO OPTIONS FOR SETTING UP A RECT PROJECT

CREATE REACT APP VITE

👉 Complete “starter kit” for React applications 👉 Modern build tool that contains a template
for setting up React applications
👍 Everything is already configured: ESLint,
Prettier, Jest, etc. Jest 👎 Need to manually set up ESLint (and others)

👎 Uses slow and outdated technologies (i.e. 👍 Extremely fast hot module replacement
webpack) HMR and bundling

Most of the course

✅ Use for tutorials or experiments ✅ Use for modern real-world apps

⛔ Don’t use for a real-world app
By the end of the course
(
)
-
-
WHAT ABOUT REACT FRAMEWORKS?

👉 react.dev

👉 The React team now advises to use a “React

Framework” for new projects

👉 Many people think that this is not the best

idea: “vanilla” React apps are important too!

👉 This only makes sense for building actual

products, not for learning React

👉 Of course, you still need to learn React itself

✌ Don’t worry about this recommendation

for now. Let’s just learn React!
WORKING WITH
COMPONENTS,
PROPS, AND JSX
SECTION
WORKING WITH COMPONENTS,
PROPS, AND JSX

LECTURE
COMPONENTS AS BUILDING
BLOCKS
COMPONENTS AS BUILDING BLOCKS

COMPONENTS

👉 React applications are entirely made out of

components

👉 Building blocks of user interfaces in React

 COMPONENTS AS BUILDING BLOCKS

COMPONENTS

Component A

👉 React applications are entirely made out of

components Component B
Webpage
Component B UI
👉 Building blocks of user interfaces in React

Component C
👉 Piece of UI that has its own data, logic,
and appearance (how it works and looks)

👉 We build complex UIs by building multiple

components and combining them
Component A

Data Logic Appearance

(
)
COMPONENTS AS BUILDING BLOCKS

VideoPlayer
COMPONENTS

👉 React applications are entirely made out of Menu

components
RefineQuestions

👉 Building blocks of user interfaces in React

Filters

👉 Piece of UI that has its own data, logic,

and appearance (how it works and looks)
Question
👉 We build complex UIs by building multiple
components and combining them
Question
👉 Components can be reused, nested inside
each other, and pass data between them
Question

QuestionList
COMPONENT TREES

VideoPlayer
App

Menu

Video
Menu
Refine Questions RefineQuestions
Player Questions List

Filters

Filters Question

Question Question

Parent Child
component component Question Question

Question

QuestionList
SECTION
WORKING WITH COMPONENTS,
PROPS, AND JSX

LECTURE
WHAT IS JSX?
WHAT IS JSX?

JSX
Component

Data
👉 Declarative syntax to describe what
components look like and how they work Logic
JSX returned from component
👉 Components must return a block of JSX Appearance

👉 Extension of JavaScript that allows us to

embed JavaScript, CSS, and React
components into HTML
WHAT IS JSX?

JSX

👉 Declarative syntax to describe what

components look like and how they work

👉 Components must return a block of JSX

👉 Extension of JavaScript that allows us to

embed JavaScript, CSS, and React
components into HTML

👉 Each JSX element is converted to a

React.createElement function call

👉 We could use React without JSX

JSX IS DECLARATIVE

IMPERATIVE “How to do things”

👉 Manual DOM element selections and DOM traversing

👉 Step-by-step DOM mutations until we reach the desired UI

DECLARATIVE “What we want”

👉 Describe what UI should look like using JSX, based on current data

👉 React is an abstraction away from DOM we never touch the DOM

👉 Instead, we think of the UI as a reflection of the current data

:
SECTION
WORKING WITH COMPONENTS,
PROPS, AND JSX

LECTURE
SEPARATION OF CONCERNS
SEPARATION OF CONCERNS?

“Traditional” separation
ONE TECHNOLOGY PER FILE
of concerns

Rise of React
JavaScript is in Logic and UI are Why keep them
interactive Components
charge of HTML tightly coupled separated?
SPAs JSX
+
SEPARATION OF CONCERNS?

ONE COMPONENT PER FILE

Component

Data

Logic

Appearance HTML and JS

are colocated

Fundamental reason for components

Rise of React
JavaScript is in Logic and UI are Why keep them
interactive Components
charge of HTML tightly coupled separated?
SPAs JSX
+
SEPARATION OF CONCERNS!

ONE TECHNOLOGY PER FILE ONE COMPONENT PER FILE

“Traditional”
separation of
concerns
Each component
is concerned
with one piece
COMPLETELY of the UI
NEW PARADIGM

Question

Menu

Filters

Player
Rise of React
JavaScript is in Logic and UI are Why keep them
interactive Components
charge of HTML tightly coupled separated?
SPAs JSX
+
 SECTION
WORKING WITH COMPONENTS,
PROPS, AND JSX

LECTURE
PROPS, IMMUTABILITY, AND ONE
WAY DATA FLOW
-
REVIEWING PROPS

PROPS
App

👉 Props are used to pass data from parent

components to child components (down
the component tree)
Header Menu Footer

Pizza Order

Pizza

Pizza
REVIEWING PROPS

PROPS

👉 Props are used to pass data from parent

components to child components (down
the component tree)

👉 Essential tool to configure and customize

components (like function parameters)

👉 With props, parent components control

how child components look and work
REVIEWING PROPS

PROPS

👉 Props are used to pass data from parent

components to child components (down
the component tree)

👉 Essential tool to configure and customize

components (like function parameters)

👉 With props, parent components control

how child components look and work

👉 Anything can be passed as props: single

values, arrays, objects, functions, even
other components
 PROPS ARE READ ONLY!

Props is data coming from the

Component
outside, and can only be updated by ☝ Props are read-only, they are
the parent component
Data immutable! This is one of
React’s strict rules.
Parent
Props
Component Data
☝ If you need to mutate props,
State you actually need state
State is internal data that can be
updated by the component’s logic
Logic WHY?

👉 Mutating props would affect parent,

Appearance
creating side effects (not pure)

👉 Components have to be pure

functions in terms of props and state

👉 This allows React to optimize apps,

Don’t do this! avoid bugs, make apps predictable
-
 ONE WAY DATA FLOW

App
ONE WAY DATA FLOW...

👍 ... makes applications more

predictable and easier to
understand
Header Menu Footer
👍 … makes applications
easier to debug, as we have
Pizza Order
more control over the data

👍 … is more performant
Pizza

Pizza
Angular has two-way data flow
-
-
SECTION
WORKING WITH COMPONENTS,
PROPS, AND JSX

LECTURE
THE RULES OF JSX
 RULES OF JSX

GENERAL JSX RULES DIFFERENCES BETWEEN JSX AND HTML

👉 JSX works essentially like HTML, but we can enter 👉 className instead of HTML’s class
“JavaScript mode” by using {} (for text or attributes)
👉 htmlFor instead of HTML’s for
👉 We can place JavaScript expressions inside {}.
👉 Every tag needs to be closed. Examples: <img />
Examples: reference variables, create arrays or objects,
or <br />
[].map(), ternary operator

👉 All event handlers and other properties need to be

👉 Statements are not allowed (if/else, for, switch)
camelCased. Examples: onClick or onMouseOver
👉 JSX produces a JavaScript expression
👉 Exception: aria-* and data-* are written with
== dashes like in HTML

1⃣ We can place other pieces of JSX inside {} 👉 CSS inline styles are written like this: {{<style>}}
(to reference a variable, and then an object)
2⃣ We can write JSX anywhere inside a component (in
if/else, assign to variables, pass it into functions) 👉 CSS property names are also camelCased

👉 A piece of JSX can only have one root element. If you 👉 Comments need to be in {} (because they are JS
need more, use <React.Fragment> (or the short <>)
)
SECTION
WORKING WITH COMPONENTS,
PROPS, AND JSX

LECTURE
SECTION SUMMARY
 🎯 SECTION SUMMARY
Components in
To pass data from parent
component tree
to child components App Component

Props Data

JS Logic

Header Menu Footer Appearance: JSX

“HTML”

Rendering multiple CSS

components at once
using the JavaScript Pizza Order JS inside {}
.map() method

List of
Pizza
Pizzas
Components can be
conditionally rendered JSX block is what
Pizza using JS tools: &&, ?, we return from a
and multiple return component
STATE, EVENTS, AND
FORMS INTERACTIVE
COMPONENTS
:
 SECTION
STATE, EVENTS, AND FORMS
INTERACTIVE COMPONENTS

LECTURE
WHAT IS STATE IN REACT?
:
 📚 WHAT WE NEED TO LEARN

WHAT REACT DEVELOPERS NEED TO LEARN ABOUT STATE

1 What is state and why do we need it? This section

2 How to use state in practice?

👉 useState
👉 useReducer
👋 State is the most important
concept in React
👉 Context API Rest of the
course...
So we will keep learning about state
3 Thinking about state
throughout the entire course…)
👉 When to use state
👉 Where to place state
👉 Types of state
(
:
WHAT IS STATE?

Parent
STATE Component

👉 Data that a component can hold over time,

Component
necessary for information that it needs to
remember throughout the app’s lifecycle Data

🧠
Props
👉 “Component’s memory” Data

State

Logic

Appearance
WHAT IS STATE?

STATE

👉 Data that a component can hold over time,

necessary for information that it needs to
remember throughout the app’s lifecycle

👉 “Component’s memory”
🧠
👉 “State variable” / “piece of state” A single
variable in a component (component state)

We use these terms

interchangeably
:
WHAT IS STATE?

Parent
STATE Component

👉 Data that a component can hold over time, DATA UI

Component
necessary for information that it needs to
remember throughout the app’s lifecycle Data

🧠
Props
👉 “Component’s memory” Data
Component
State
View
👉 Component state: Single local component
variable (“Piece of state”, “state variable”)
Logic

👉 Updating component state triggers React

to re-render the component Appearance
Component
rendered in the UI
WHAT IS STATE?

STATE
STATE ALLOWS DEVELOPERS TO
👉 Data that a component can hold over time,
necessary for information that it needs to
remember throughout the app’s lifecycle
Update the component’s
1
view (by re-rendering it)
👉 “Component’s memory”
🧠 Persist local variables between
2
👉 Component state: Single local component renders
variable (“Piece of state”, “state variable”)

👉 Updating component state triggers React

to re-render the component 👋 State is a tool. Mastering state will
unlock the power of React development
:
 SECTION
STATE, EVENTS, AND FORMS
INTERACTIVE COMPONENTS

LECTURE
THE MECHANICS OF STATE
:
 THE MECHANICS OF STATE IN REACT

In React, a view A component is

We don’t do How is a
is updated by re-rendered
direct DOM component view
re-rendering the when its state is
manipulations updated then?
component updated

Because React Important

is declarative React principle

RENDER / UPDATED
STATE VIEW
RE RENDER VIEW

👉 State is preserved
React calls the
throughout re-renders
component
function again
-
 THE MECHANICS OF STATE IN REACT

In React, a view A component is

We don’t do How is a
is updated by re-rendered
direct DOM component view
re-rendering the when its state is
manipulations updated then?
component updated

3 RE RENDER

UPDATED RENDER / UPDATED

STATE VIEW
STATE RE RENDER VIEW
Event handler

2 UPDATE STATE
-
-
 THE MECHANICS OF STATE IN REACT

In React, a view A component is

We don’t do How is a So to update a
is updated by re-rendered
direct DOM component view view, we update
re-rendering the when its state is
manipulations updated then? state
component updated

RE RENDER

UPDATE STATE
-
THE MECHANICS OF STATE IN REACT

In React, a view A component is

We don’t do How is a So to update a
is updated by re-rendered
direct DOM component view view, we update
re-rendering the when its state is
manipulations updated then? state
component updated

👉 React is called “React” because...

REACT REACTS TO STATE CHANGES

DATA UI
BY RE RENDERING THE UI
-
 SECTION
STATE, EVENTS, AND FORMS
INTERACTIVE COMPONENTS

LECTURE
MORE THOUGHTS ABOUT STATE
STATE GUIDELINES
+
:
ONE COMPONENT, ONE STATE

👋 Each component has and manages its

own state, no matter how many times
TeamScores
we render the same component

Multiple instances of the

Counter component
Counter Counter Counter

score = 2
0
1 score = 0 score = 1
0

0
2
1 0 0
1
UI AS A FUNCTION OF STATE
Component A

Component B
UI = f(state )
Component C

Component D

STATE
TIME
UI

👉 With state, we view UI as a reflection of data changing over time

DECLARATIVE, REVISITED
👉 We describe that reflection of data using state, event handlers, and JSX
🎯 IN PRACTICAL TERMS...

PRACTICAL GUIDELINES ABOUT STATE

👉 Use a state variable for any data that the component should keep track of (“remember”) over
time. This is data that will change at some point. In Vanilla JS, that’s a let variable, or an [] or {}

👉 Whenever you want something in the component to be dynamic, create a piece of state related
to that “thing”, and update the state when the “thing” should change (aka “be dynamic”)
👉 Example: A modal window can be open or closed. So we create a state variable
isOpen that tracks whether the modal is open or not. On isOpen = true we
display the window, on isOpen = false we hide it.

👉 If you want to change the way a component looks, or the data it displays, update its state.
This usually happens in an event handler function.

👉 When building a component, imagine its view as a reflection of state changing over time

👉 For data that should not trigger component re-renders, don’t use state. Use a regular variable
instead. This is a common beginner mistake.
 SECTION
STATE, EVENTS, AND FORMS
INTERACTIVE COMPONENTS

LECTURE
STATE VS. PROPS
:
STATE VS. PROPS

STATE PROPS
Parent state
update

👉 Internal data, owned by 👉 External data, owned by

component parent component

👉 Component “memory” 👉 Similar to function parameters

👉 Can be updated by the 👉 Read-only

component itself
👉 Receiving new props causes
👉 Updating state causes component to re-render.
component to re-render Usually when the parent’s
state has been updated
👉 Used to make components
interactive 👉 Used by parent to configure
child component (“settings”)
 THINKING IN REACT
STATE MANAGEMENT

:
 SECTION
THINKING IN REACT STATE
MANAGEMENT

LECTURE
WHAT IS "THINKING IN REACT"?
:
“THINKING IN REACT” IS A CORE SKILL

THINKING IN REACT

👉 “React Mindset”
HOW TO
THINKING IN 👉 Thinking about components,
WORK WITH
REACT state, data flow, effects, etc.
REACT API
👉 Thinking in state transitions, not
element mutations

This is where professional

React apps are built
“THINKING IN REACT” AS A PROCESS
Not a rigid process

THE “THINKING IN REACT” PROCESS WHEN YOU KNOW HOW TO “THINK IN

REACT”, YOU WILL BE ABLE TO ANSWER
Break the desired UI into components and
1
establish the component tree 🤔 How to break up a UI design into components?

2 Build a static version in React (without state) 🤔 How to make some components reusable?

3 Think about state: 🤔 How to assemble UI from reusable components?

👉 When to use state

👉 Types of state: local vs. global
🤔 What pieces of state do I need for interactivity?

👉 Where to place each piece of state

State 🤔 Where to place state? What component should
management "own" each piece of state?
4 Establish data flow:
👉 One-way data flow 🤔 What types of state can or should I use?
👉 Child-to-parent communication
👉 Accessing global state
🤔 How to make data flow through app?
(
)
:
:
 SECTION
THINKING IN REACT STATE
MANAGEMENT

LECTURE
FUNDAMENTALS OF STATE
MANAGEMENT
:
WHAT IS STATE MANAGEMENT?

👉 State management: Deciding when to create pieces of

state, what types of state are necessary, where to place
🏠 Giving each piece
of state a home
each piece of state, and how data flows through the app

isOpen
PIECES OF
STATE coupons
searchQuery user
(useState)

notifications
shoppingCart language
TYPES OF STATE LOCAL VS. GLOBAL STATE

LOCAL STATE GLOBAL STATE

👉 State needed only by one or few components 👉 State that many components might need

👉 State that is defined in a component and only 👉 Shared state that is accessible to every
that component and child components have component in the entire application
access to it (by passing via props)

☝ We should always start with local state Context API

Global state

Local state
:
 STATE WHEN AND WHERE?
NO
Need to store data Will data change at some point? Regular const variable

YES
YES
Can be computed from existing state/props? Derive state
“Always start
with local state” NO
NO
Should it re-render component? Ref (useRef, more on this later)

YES
WHEN TO CREATE STATE
Place a new piece of state in component
WHERE TO PLACE STATE
YES
Only used by this component? Leave in component

NO
YES
Also used by a child component? Pass to child via props

NO
NO YES
👉 Probably global state. Global state
Used by one or a few sibling components? Lift state up to first common parent
management later in the course...
:
 SECTION
THINKING IN REACT STATE
MANAGEMENT

LECTURE
REVIEWING "LIFTING UP STATE"
:
 PROBLEM SHARING STATE WITH SIBLING COMPONENT

👉 Total component also needs

access to coupons state
ONE WAY
DATA FLOW
coupons
Checkout Total

Total Promotions Promotions

coupons
coupons
setCoupons coupons

Data can only flow down to children

(via props), not sideways to siblings

🤔 How do we share state with other components?

-
:
 SOLUTION LIFTING STATE UP

State was lifted up to the 👉 Total component also needs

closest common parent access to coupons state
ONE WAY
DATA FLOW coupons
coupons
Checkout Total

props props

Total Promotions Promotions

coupons

setCoupons coupons

✌ By lifting state up, we have successfully shared one

piece of state with multiple components in different
positions in the component tree
-
:
 CHILD TO PARENT COMMUNICATION

👉 Child-to-parent communication (inverse data

flow): child updating parent state (data “flowing” up) 👉 Total component also needs
access to coupons state
ONE WAY
DATA FLOW coupons
coupons
Checkout UPDATE Total
setCoupons

props props

Total Promotions Promotions

coupons coupons

coupons

🤔 If data flows from parent to children, how can

Promotions (child) update state in Checkout (parent)?
-
-
-
 SECTION
THINKING IN REACT STATE
MANAGEMENT

LECTURE
DERIVED STATE
:
DERIVING STATE

👎 Three separate pieces of state, even though

numItems and totalPrice depend on cart

👎 Need to keep them in sync (update together)

👎 3 state updates will cause 3 re-renders

DERIVING STATE
👍 Derived state: state that is computed from
an existing piece of state or from props

👍 Just regular variables, no useState

👍 cart state is the single source of truth for

this related data

👍 Works because re-rendering component will

automatically re-calculate derived state
 SECTION
THINKING IN REACT STATE
MANAGEMENT

LECTURE
THE CHILDREN PROP MAKING A
REUSABLE BUTTON
:
:
THE CHILDREN PROP

Button

props.children
Children of Button,
accessible through
props.children

An empty “hole” that can be filled

by any JSX the component
receives as children

👉 The children prop allow us to pass JSX into an element (besides regular props)

👉 Essential tool to make reusable and configurable components (especially component content)

👉 Really useful for generic components that don’t know their content before being used (e.g. modal)
 PART 02
—
INTERMEDIATE
REACT
THINKING IN REACT
COMPONENTS,
COMPOSITION, AND
REUSABILITY

:
 SECTION
THINKING IN REACT
COMPONENTS, COMPOSITION,
AND REUSABILITY

LECTURE
HOW TO SPLIT A UI INTO
COMPONENTS
:
COMPONENT SIZE MATTERS

Just one huge

component

COMPONENT SIZE

SMALL HUGE

👉 Too many responsibilities

👉 Might need too many props

👉 Hard to reuse

👉 Complex code, hard to understand

COMPONENT SIZE MATTERS

Many small
components 0
0

COMPONENT SIZE

SMALL Generally, we need to find the right balance HUGE

between too specific and too broad

👉 We end up with 100s of mini-components 👉 Too many responsibilities

👉 Confusing codebase 👉 Might need too many props

👉 Too abstracted 👉 Hard to reuse

Creating something new to hide the 👉 Complex code, hard to understand

implementation details of that thing
 HOW TO SPLIT A UI INTO COMPONENTS

👉 The 4 criteria for splitting

a UI into components: 👎
1. Logical separation
of content/layout

0 ✅ Logical separation
2. Reusability
✅ Some are reusable

0 ✅ Low complexity

3. Responsibilities
/ complexity

👎
0
0
4. Personal
coding style 0
FRAMEWORK WHEN TO CREATE A NEW COMPONENT?

💡 SUGGESTION When in doubt, start with a relatively big component, Skip if you're sure you
then split it into smaller components as it becomes necessary need to reuse. But
otherwise, you don’t need
to focus on reusability
and complexity early on
1. Logical separation 👉 Does the component contain pieces of content or layout
of content/layout that don’t belong together?

👉 Is it possible to reuse part of the component?

2. Reusability
👉 Do you want or need to reuse it?
You might
3. Responsibilities 👉 Is the component doing too many different things? need a new
/ complexity component
👉 Does the component rely on too many props?
👉 Does the component have too many pieces of state
and/or effects?
👉 Is the code, including JSX, too complex/confusing?
👋 These are all
guidelines… It will
4. Personal become intuitive
👉 Do you prefer smaller functions/components?
coding style over time!
:
:
SOME MORE GENERAL GUIDELINES

💰 Be aware that creating a new component creates a new abstraction. Abstractions

have a cost, because more abstractions require more mental energy to switch back
and forth between components. So try not to create new components too early

🏷 Name a component according to what it does or what it displays. Don’t be afraid of

using long component names

🪆 Never declare a new component inside another component!

🗃 Co-locate related components inside the same file. Don’t separate components into
different files too early

↔ It’s completely normal that an app has components of many different sizes, including
very small and huge ones See next slide... 👉)
(
 ANY APP HAS COMPONENTS OF DIFFERENT SIZES AND REUSABILITY

0
👉 Page component

SMALL Components with all different sizes HUGE

Different degrees of size, reusability,
NON
REUSABLE responsibility, and complexity
REUSABLE

👉 Some very small components are necessary! 👉 Most apps will have a few huge components
👉 Highly reusable 👉 Not meant to be reused (not a problem!
👉 Very low complexity
-
)
 SECTION
THINKING IN REACT
COMPONENTS, COMPOSITION,
AND REUSABILITY

LECTURE
COMPONENT CATEGORIES
:
COMPONENT CATEGORIES

👉 Most of your components will naturally fall into one of three categories:

Stateless /
Stateful Structural
presentational
components components
components

👉 No state 👉 Have state 👉 “Pages”, “layouts”, or

“screens” of the app
👉 Can receive props and 👉 Can still be reusable
simply present received 👉 Result of composition
data or other content
👉 Can be huge and non-
👉 Usually small and reusable reusable (but don’t have to)
 SECTION
THINKING IN REACT
COMPONENTS, COMPOSITION,
AND REUSABILITY

LECTURE
COMPONENT COMPOSITION
:
 WHAT IS COMPONENT COMPOSITION?

“USING” A COMPONENT COMPONENT COMPOSITION

Modal Success Modal Success

Want to
reuse

👉 Success is inside Modal: we can NOT 👉 Success is passed into Modal: we

reuse Modal can REUSE Modal
WHAT IS COMPONENT COMPOSITION?

COMPONENT COMPOSITION
👉 Component composition: combining
different components using the
children prop (or explicitly defined
Modal Error props)

WE COMPONENT COMPOSITION, WE CAN

Create highly reusable and flexible

1
components

2 Fix prop drilling (great for layouts)

👉 Success is passed into Modal: we

Possible because components don’t
can REUSE Modal need to know their children in advance
:
 SECTION
THINKING IN REACT
COMPONENTS, COMPOSITION,
AND REUSABILITY

LECTURE
PROPS AS A COMPONENT API
:
PROPS AS AN API

Component
Component props Public API

👩💻
COMPONENT
Consuming
component
🎛 🧑💻
👩💻
COMPONENT
CONSUMER App Abstraction that CREATOR
encapsulates UI and logic

TOO LITTLE PROPS We need to find the right TOO MANY PROPS
balance between too little
👉 Not flexible enough and too many props, that 👉 Too hard to use
👉 Might not be useful works for both the 👉 Exposing too much complexity
consumer and the creator
👉 Hard-to-write code
👉 Provide good default values
=
GOT QUESTIONS? FEEDBACK?
JUST POST IT IN THE Q&A OF
THIS VIDEO, AND YOU WILL
GET HELP THERE!
HOW REACT WORKS
BEHIND THE SCENES
SECTION
HOW REACT WORKS BEHIND THE
SCENES

LECTURE
COMPONENTS, INSTANCES, AND
ELEMENTS
COMPONENT VS. INSTANCE VS. ELEMENT

Component

👉 Description of a piece of UI

👉 A component is a function that returns React

elements (element tree), usually written as JSX

👉 “Blueprint” or “Template”
COMPONENT VS. INSTANCE VS. ELEMENT

Component

Component Instance
Instances of Tab

👉 Instances are created when we “use” components

👉 React internally calls Tab()

👉 Actual “physical” manifestation of a component

👉 Has its own state and props

👉 Has a lifecycle (can “be born”, “live”, and “die”)

COMPONENT VS. INSTANCE VS. ELEMENT

Component

Component Instance
REACT ELEMENT
RETURNS

React Element
👉 JSX is converted to React.createElement() function calls

👉 A React element is the result of these function calls

👉 Information necessary to create DOM elements

COMPONENT VS. INSTANCE VS. ELEMENT

Component

Component Instance

RETURNS

React Element 👉 Actual visual representation of the component

instance in the browser

INSERTED TO DOM

DOM Element HTML

(
)
 SECTION
HOW REACT WORKS BEHIND THE
SCENES

LECTURE
HOW RENDERING WORKS
OVERVIEW
:
 QUICK RECAP BEFORE WE GET STARTED

Component React DOM Element

Instance A1 Element HTML

Component React DOM Element

Component A
Instance A2 Element HTML

User
Component React DOM Element Interface on
Instance A3 Element HTML the screen
.
.
.

Component React DOM Element

Component B
Instance B1 Element HTML
.
.
.
🤔 How does this process actually work?
(
(
(
(
)
)
)
)
OVERVIEW HOW COMPONENTS ARE DISPLAYED ON THE SCREEN

React calls component React actually writes to the

functions and figures out how DOM, updating, inserting, and
DOM should be updated deleting elements

RENDER IS RENDER COMMIT BROWSER

TRIGGERED PHASE PHASE PAINT

Common sense meaning of the word “render”

By updating
state somewhere

☝ In React, rendering is NOT updating the DOM or displaying elements on the screen.
Rendering only happens internally inside React, it does not produce visual changes.
:
 HOW RENDERS ARE TRIGGERED

1 RENDER IS TRIGGERED

THE TWO SITUATIONS THAT TRIGGER RENDERS

1 Initial render of the application

2 State is updated in one or more component instances (re-render)

👉 The render process is triggered for the entire application

👉 In practice, it looks like React only re-renders the component where the state update
happens, but that’s not how it works behind the scenes

👉 Renders are not triggered immediately, but scheduled for when the JS engine has
some “free time”. There is also batching of multiple setState calls in event handlers
[
]
:
 SECTION
HOW REACT WORKS BEHIND THE
SCENES

LECTURE
HOW RENDERING WORKS THE
RENDER PHASE
:
 REVIEW THE MECHANICS OF STATE IN REACT

3 RE RENDER

UPDATED RENDER / UPDATED

STATE VIEW
STATE RE RENDER VIEW
Event handler

2 UPDATE STATE

NOT TRUE #1 RENDERING IS UPDATING THE SCREEN / DOM

NOT TRUE #2 REACT COMPLETELY DISCARDS OLD VIEW DOM ON RE RENDER

-
-
:
:
:
(
)
-
 THE RENDER PHASE

2 RENDER PHASE
Component
instances that React Elements
triggered re-render

New
Virtual DOM
[
]
 THE VIRTUAL DOM REACT ELEMENT TREE

1⃣ INITIAL RENDER 🔄 RE RENDERS

👉 Virtual DOM Tree of all React
elements created from all
STATE
COMPONENT TREE COMPONENT TREE instances in the component tree
UPDATE

A A 👉 Cheap and fast to create multiple

trees
B C D B C D
👉 Nothing to do with “shadow DOM”
E E E E

“Virtual DOM” 🚨 Rendering a component will

REACT ELEMENT TREE REACT ELEMENT TREE cause all of its child components
to be rendered as well (no matter
A A if props changed or not)

B C D B C D

E E E E
-
:
(
)
 THE VIRTUAL DOM REACT ELEMENT TREE

1⃣ INITIAL RENDER 🔄 RE RENDERS

👉 Virtual DOM Tree of all React
elements created from all
STATE
COMPONENT TREE COMPONENT TREE instances in the component tree
UPDATE

A A 👉 Cheap and fast to create multiple

trees
B C D B C D
👉 Nothing to do with “shadow DOM”
E E E E

“Virtual DOM” 🚨 Rendering a component will

REACT ELEMENT TREE REACT ELEMENT TREE cause all of its child components
to be rendered as well (no matter
A A if props changed or not)

B C D B C D 👉

Necessary because React doesn’t

E E E E know whether children will be
affected
-
:
(
)
 THE RENDER PHASE

2 RENDER PHASE
Component
instances that React Elements
triggered re-render

New
Virtual DOM
Reconciler
called “Fiber”

Current
Reconciliation Updated
Fiber tree
Diffing Fiber tree
(before state update)
[
+
]
WHAT IS RECONCILIATION AND WHY DO WE NEED IT?

🤔 Why not update the entire DOM whenever state

changes somewhere in the app?

BECAUSE

👉 That would be inefficient and wasteful:

1 Writing to the DOM is (relatively) slow

showModal = true
Usually only a small part of the DOM needs
2
to be updated

👉 React reuses as much of the existing DOM as possible

HOW?

❤ Reconciliation: Deciding which DOM elements

actually need to be inserted, deleted, or updated,
in order to reflect the latest state changes
Only these new DOM elements are created
 THE RECONCILER FIBER

App App
REACT
ELEMENT Video Modal Btn Video Modal Btn
FIBER
TREE
TREE
VIRTUAL Overlay ON INITIAL Overlay
DOM RENDER
h3 button h3 button

FIBER
👉 Fiber tree: internal tree that has a “Unit of work”
👉 Rendering process can be split into
“fiber” for each component
chunks, tasks can be prioritized, and work Current state
instance and DOM element can be paused, reused, or thrown away
Props
👉 Fibers are NOT re-created on 👉 Enables concurrent features like
Side effects
every render Suspense or transitions
Used hooks
👉 Work can be done asynchronously 👉 Long renders won’t block JS engine
Queue of work
(
)
:
 RECONCILIATION IN ACTION

showModal = true showModal = false

App App

Video Modal Btn Video Btn

State update in App, so
Overlay STATE
all remaining children
UPDATE are re-rendered
NEW VIRTUAL
h3 button DOM

Showing DOM work) DOM

App App
Update
Video Modal Btn Video Modal Btn (text)
Reconciliation
Diffing DOM
Overlay Overlay
Deletions
h3 button h3 button
Comparing elements based
CURRENT FIBER TREE on their position in the tree UPDATED FIBER TREE (workInProgress)
+
(
 THE RENDER PHASE

2 RENDER PHASE
Component
instances that React Elements
triggered re-render

New
Virtual DOM Result of the
Reconciler render phase
called “Fiber” (“list of effects”)

Current
Reconciliation Updated List of DOM
Fiber tree
Diffing Fiber tree updates
(before state update)
[
+
]
 SECTION
HOW REACT WORKS BEHIND THE
SCENES

LECTURE
HOW RENDERING WORKS THE
COMMIT PHASE
:
 THE COMMIT PHASE AND BROWSER PAINT

2 RENDER PHASE 3 COMMIT PHASE 4 BROWSER PAINT

List of DOM Updated UI on the

Updated DOM
updates screen

React ReactDOM

👉 React writes to the DOM insertions, deletions, and updates (list of

DOM updates are “flushed” to the DOM

👉 Committing is synchronous: DOM is updated in one go, it can’t be

interrupted. This is necessary so that the DOM never shows partial
results, ensuring a consistent UI (in sync with state at all times)

👉 After the commit phase completes, the workInProgress fiber tree

becomes the current tree for the next render cycle
[
[
[
]
]
]
:
)
 THE COMMIT PHASE AND BROWSER PAINT

2 RENDER PHASE 3 COMMIT PHASE 4 BROWSER PAINT

List of DOM Updated UI on the

Updated DOM
updates screen

React ReactDOM
“RENDERERS”

Does not touch the DOM.

React Native
React only renders. It
doesn’t know where the
render result will go

Many others…
React can be used on
different platforms (“hosts”) Terrible name! Renderers do not render, they commit the result of render phase…
[
[
[
]
]
]
 RECAP PUTTING IT ALL TOGETHER

1 TRIGGER 💥 👉 Happens only on initial render and state updates

Updated React New

Elements Virtual DOM
Reconciliation Updated List of DOM
Diffing Fiber tree updates
Current
Fiber tree
2 RENDER PHASE
3 COMMIT
Updated DOM
👉 Does not produce any visual output PHASE

👉 Rendering a component also renders all of its child components

👉 Asynchronous: work can be split, prioritized, paused, resumed

4 BROWSER Updated UI on
PAINT screen
👉 Synchronous: DOM updates are written in one go, to keep UI consistent
[
[
[
[
+
]
]
]
]
:
SECTION
HOW REACT WORKS BEHIND THE
SCENES

LECTURE
HOW DIFFING WORKS
 THE RENDER PHASE

2 RENDER PHASE
Component
instances that React Elements
triggered re-render

Comparing elements step-

New by-step, based on their
Virtual DOM position in the tree

Current
Reconciliation Updated List of DOM
Fiber tree
Diffing Fiber tree updates
(before state update)
[
+
]
HOW DIFFING WORKS

👉 Diffing uses 2 fundamental 1. SAME POSITION, DIFFERENT ELEMENT

assumptions (rules):

Two elements of
1 different types will
Different
produce different trees
DOM element

Elements with a stable

2 key prop stay the
same across renders
Different React
element (component
instance)
👉 This allows React to go from
1,000,000,000 O(n3)] to 👉 React assumes entire sub-tree is no longer valid
1000 [O(n)] operations per
1000 elements 👉 Old components are destroyed and removed from DOM, including state

👉 Tree might be rebuilt if children stayed the same (state is reset)

[
HOW DIFFING WORKS

👉 Diffing uses 2 fundamental 2. SAME POSITION, SAME ELEMENT

assumptions (rules):

Two elements of
1 different types will
Same DOM
produce different trees
element

Elements with a stable

2 key prop stay the
same across renders
Same React
element
(component
instance)
👉 This allows React to go from
1,000,000,000 O(n3)] to 👉 Element will be kept (as well as child elements), including state
1000 [O(n)] operations per
1000 elements 👉 New props / attributes are passed if they changed between renders

👉 Sometimes this is not what we want… Then we can use the key prop
[
SECTION
HOW REACT WORKS BEHIND THE
SCENES

LECTURE
THE KEY PROP
WHAT IS THE KEY PROP?

KEY PROP

👉 Special prop that we use to tell the diffing algorithm that an element is unique

👉 Allows React to distinguish between multiple instances of the same component type

👉 When a key stays the same across renders, the element will be kept in the DOM
(even if the position in the tree changes)

1 Using keys in lists

👉 When a key changes between renders, the element will be destroyed and a new one
will be created (even if the position in the tree is the same as before)

2 Using keys to reset state

1. KEYS IN LISTS STABLE KEY

👎 NO KEYS 👍 WITH KEYS

ADDING NEW LIST ITEM ADDING NEW LIST ITEM

👉 Same elements, but different position in 👉 Different position in the tree, but the key
tree, so they are removed and recreated stays the same, so the elements will be
in the DOM (bad for performance) kept in the DOM 👉 Always use keys!
[
]
2. KEY PROP TO RESET STATE CHANGING KEY

👉 If we have the same element at the same position in

the tree, the DOM element and state will be kept

NEW QUESTION IN
SAME POSITION

Question state (answer): Question state (answer):

State was
preserved. NOT
what we want
[
]
2. KEY PROP TO RESET STATE CHANGING KEY

👉 If we have the same element at the same position in

👍 WITH KEY the tree, the DOM element and state will be kept

NEW QUESTION IN
SAME POSITION

Question state (answer): Question state (answer):

State was
RESET
[
]
 SECTION
HOW REACT WORKS BEHIND THE
SCENES

LECTURE
RULES FOR RENDER LOGIC PURE
COMPONENTS
:
THE TWO TYPES OF LOGIC IN REACT COMPONENTS

1. RENDER LOGIC

👉 Code that lives at the top level of the component function

👉 Participates in describing how the component view looks like

👉 Executed every time the component renders

2. EVENT HANDLER FUNCTIONS

👉 Executed as a consequence of the event that the handler is

listening for (change event in this example)

👉 Code that actually does things: update state, perform an HTTP

request, read an input field, navigate to another page, etc.
REFRESHER FUNCTIONAL PROGRAMMING PRINCIPLES

✅ Pure function

👉 Side effect: dependency on or modification of any data

outside the function scope. “Interaction with the outside
world”. Examples: mutating external variables, HTTP
requests, writing to DOM.
☝ Impure function

👋 Side effects are not bad! A program can only be

useful if it has some interaction with the outside world

Side effect: Outside

variable mutation
👉 Pure function: a function that has no side effects.
☝ Impure function
👉 Does not change any variables outside its scope

👉 Given the same input, a pure function always

returns the same output Unpredictable output
(date changes)
:
RULES FOR RENDER LOGIC

☝ Components must be pure when it comes to render logic: given the same props
(input), a component instance should always return the same JSX (output)

☝ Render logic must produce no side effects: no interaction with the “outside
world” is allowed. So, in render logic:

👉 Do NOT perform network requests API calls)

👉 Do NOT start timers This is why we can’t

mutate props!
👉 Do NOT directly use the DOM API

👉 Do NOT mutate objects or variables outside of the function scope

👉 Do NOT update state (or refs): this will create an infinite loop!

👋 Side effects are allowed (and encouraged) in event handler functions!

There is also a special hook to register side effects (useEffect)
(
SECTION
HOW REACT WORKS BEHIND THE
SCENES

LECTURE
STATE UPDATE BATCHING
HOW STATE UPDATES ARE BATCHED

👉 Renders are not triggered immediately, but scheduled for when the JS engine has
some “free time”. There is also batching of multiple setState calls in event handlers

Event
handler
function
HOW STATE UPDATES ARE BATCHED

EVENT HANDLER FUNCTION

NEW STATE

answer = '' RENDER COMMIT

best = true RENDER COMMIT

solved = false RENDER COMMIT

This is NOT how React updates

multiple pieces of state in the
same event handler
+
+
+
HOW STATE UPDATES ARE BATCHED

EVENT HANDLER FUNCTION No wasted renders,

better for performance
NEW STATE

answer = ''

best = true RENDER COMMIT

solved = false

Batched state update Just ONE render and

commit per event handler
+
UPDATING STATE IS ASYNCHRONOUS

🤔 What will the value of answer be at this point?

EVENT HANDLER FUNCTION

State is stored in the Fiber tree during

render phase

🤔
At this point, re-render has not
happened yet
“Stale state”

Therefore, answer still contains current

state, not the updated state ('')
👉 Updated state variables are not immediately available
after setState call, but only after the re-render

👉 This also applies when only one state variable is updated UPDATING STATE IN REACT IS
ASYNCHRONOUS
👉 If we need to update state based on previous update, we
use setState with callback (setAnswer(answer=>...))
 BATCHING BEYOND EVENT HANDLER FUNCTIONS

We now get automatic batching

👉 We can opt out of automatic at all times, everywhere
batching by wrapping a
state update in 👉 AUTOMATIC BATCHING IN...
ReactDOM.flushSync()
(but you will never need this)
REACT 17 REACT 18

EVENT HANDLERS ✅ ✅

TIMEOUTS ❌ ✅

PROMISES ❌ ✅

NATIVE EVENTS ❌ ✅
+
SECTION
HOW REACT WORKS BEHIND THE
SCENES

LECTURE
HOW EVENTS WORK IN REACT
DOM REFRESHER EVENT PROPAGATION AND DELEGATION
DOM tree (not
EVENT Fiber tree or React
DOCUMENT element tree) EVENT DELEGATION
<html>

CAPTURING BUBBLING
1 3 👉 Handling events for multiple elements
PHASE PHASE
<body>
centrally in one single parent element
👉 By default, event
handlers listen to events <div>
👉 Better for performance and memory,
on the target and during #root as it needs only one handler function
the bubbling phase
H
<header>
👉 We can prevent .topbar 1 Add handler to parent (.options)
bubbling with
e.stopPropagation() <div> 2 Check for target element (e.target)
.options
3 If target is one of the <button>s,
<button> <button> <button> handle the event
.btn .btn .btn
H H H
👋 Very common in vanilla JS apps,
2 TARGET ELEMENT but not so much in React apps
:
 HOW REACT HANDLES EVENTS
Usually div#root, but
can be any DOM element WHEN WE ATTACH AN EVENT HANDLER...

DOCUMENT React registers all

<html>
event handlers on the
root DOM container.
<body> This is where all
events are handled
<div>
#root
H H

INSIDE REACT <header>

FIBER TREE .topbar

<div> ⛔ ... WHAT APPEARS ✅ ... WHAT ACTUALLY

.options TO BE HAPPENING HAPPENS INTERNALLY

<button> <button> <button>

.btn .btn .btn 👉 Behind the scenes, React performs event
delegation for all events in our applications
 SYNTHETIC EVENTS

PointerEvent
MouseEvent 👉 Wrapper around the DOM’s native event object

KeyboardEvent 👉 Has same interface as native event objects, like

... stopPropagation() and preventDefault()

👉 Fixes browser inconsistencies, so that events work

SyntheticEvent in the exact same way in all browsers

👉 Most synthetic events bubble (including focus,

blur, and change), except for scroll

EVENT 👉 Attributes for event handlers are named using camelCase (onClick instead of onclick or click)

HANDLERS IN 👉 Default behavior can not be prevented by returning false (only by using preventDefault())
VS. 👉 Attach “Capture” if you need to handle during capture phase (example: onClickCapture)
SECTION
HOW REACT WORKS BEHIND THE
SCENES

LECTURE
LIBRARIES VS. FRAMEWORKS &
THE REACT ECOSYSTEM
 FIRST, AN ANALOGY 🍣

ALL IN ONE KIT SEPARATE INGREDIENTS

👍 Ease of mind: All ingredients are included 👍 Freedom: You can choose the best ingredients

👎 No choice: You’re stuck with the kit’s ingredients 👎 Decision fatigue: You need to research and buy
all ingredients separately
-
-
 FIRST, AN ANALOGY 🍣

ALL IN ONE KIT SEPARATE INGREDIENTS

👍 Ease of mind: All ingredients are included 👍 Freedom: You can choose the best ingredients

👎 No choice: You’re stuck with the kit’s ingredients 👎 Decision fatigue: You need to research and buy
all ingredients separately
-
-
FRAMEWORK VS. LIBRARY
“Separate
“All-in-one kit” ingredients”
FRAMEWORK LIBRARY

Frameworks include everything “View” library

HTTP requests Styling HTTP requests Styling

Routing Form management Routing Form management

LARGE SCALE ANGULAR APP LARGE SCALE REACT APP External libraries

👍 Ease of mind: Everything you need to build a 👍 Freedom: You can (or need to) choose multiple
complete application is included in the framework 3rd-party libraries to build a complete application
(“batteries included”)
👎 Decision fatigue: You need to research,
👎 No choice: You’re stuck with the framework’s tools download, learn, and stay up-to-date with
and conventions (which is not always bad! multiple external libraries
-
-
)
REACT 3RD PARTY LIBRARY ECOSYSTEM

1 Routing (for SPAs) 👉 Library options

for different React
application needs
2 HTTP requests fetch()

3 Remote state management

4 Global state management Context API Zustand

5 Styling

6 Form management

7 Animations/transitions

8 UI components
-
FRAMEWORKS BUILT ON TOP OF REACT

“Opinionated” “VANILLA” REACT APP

React frameworks
HTTP requests Styling

Routing Form management

External libraries

Included out of the box

HTTP requests Styling

Routing Form management

👉 React frameworks offer many other features: server-side rendering SSR ,

Full-stack frameworks! static site generation SSG , better developer experience DX , etc.
(
)
(
)
(
)
 SECTION
HOW REACT WORKS BEHIND THE
SCENES

LECTURE
SECTION SUMMARY PRACTICAL
TAKEAWAYS
:
🎯 PRACTICAL SUMMARY

🧩 A component is like a blueprint for a piece of UI that will eventually exist on the screen. When we
“use” a component, React creates a component instance, which is like an actual physical
manifestation of a component, containing props, state, and more. A component instance, when
rendered, will return a React element

☎ “Rendering” only means calling component functions and calculating what DOM elements need
to be inserted, deleted, or updated. It has nothing to do with writing to the DOM. Therefore, each
time a component instance is rendered and re-rendered, the function is called again

🔁 Only the initial app render and state updates can cause a render, which happens for the entire
application, not just one single component

👪 When a component instance gets re-rendered, all its children will get re-rendered as well. This
doesn’t mean that all children will get updated in the DOM, thanks to reconciliation, which checks
which elements have actually changed between two renders. But all this re-rendering can still
have an impact on performance (more on that later in the course 👉)
🎯 PRACTICAL SUMMARY

🧬 Diffing is how React decides which DOM elements need to be added or modified. If, between
renders, a certain React element stays at the same position in the element tree, the
corresponding DOM element and component state will stay the same. If the element changed to a
different position, or if it’s a different element type, the DOM element and state will be destroyed

🔑 Giving elements a key prop allows React to distinguish between multiple component instances.
When a key stays the same across renders, the element is kept in the DOM. This is why we need
to use keys in lists. When we change the key between renders, the DOM element will be
destroyed and rebuilt. We use this as a trick to reset state

🪆 Never declare a new component inside another component! Doing so will re-create the nested
component every time the parent component re-renders. React will always see the nested
component as new, and therefore reset its state each time the parent state is updated

🔮 The logic that produces JSX output for a component instance (“render logic”) is not allowed to
produce any side effects: no API calls, no timers, no object or variable mutations, no state
updates. Side effects are allowed in event handlers and useEffect (next section 👉)
🎯 PRACTICAL SUMMARY

📱 The DOM is updated in the commit phase, but not by React, but by a “renderer” called ReactDOM.
That’s why we always need to include both libraries in a React web app project. We can use other
renderers to use React on different platforms, for example to build mobile or native apps

🗂 Multiple state updates inside an event handler function are batched, so they happen all at once,
causing only one re-render. This means we can not access a state variable immediately after
updating it: state updates are asynchronous. Since React 18, batching also happens in timeouts,
promises, and native event handlers.

🌐 When using events in event handlers, we get access to a synthetic event object, not the
browser’s native object, so that events work the same way across all browsers. The difference is
that most synthetic events bubble, including focus, blur, and change, which do not bubble as
native browser events. Only the scroll event does not bubble

🛠 React is a library, not a framework. This means that you can assemble your application using your
favorite third-party libraries. The downside is that you need to find and learn all these additional
libraries. No problem, as you will learn about the most commonly used libraries in this course
EFFECTS AND DATA
FETCHING
SECTION
EFFECTS AND DATA FETCHING

LECTURE
THE COMPONENT LIFECYCLE
 COMPONENT INSTANCE LIFECYCLE

🐣 🐓 Optional)
💀
MOUNT / RE RENDER
UNMOUNT
INITIAL RENDER

👉 Component instance is 👉 Component instance is

rendered for the first time HAPPENS WHEN destroyed and removed

👉 Fresh state and props are 👉 State changes 👉 State and props are
created 👉 Props change destroyed

👉 Parent re-renders

👉 Context changes 👋 We can define code to run at

these specific points in time
(
-
:
(
)
SECTION
EFFECTS AND DATA FETCHING

LECTURE
A FIRST LOOK AT EFFECTS
 WHERE TO CREATE SIDE EFFECTS
We need side effects all the
time. They make our
SIDE EFFECT applications do something.
Not in render logic!
(can be made in...)
Triggered by EVENTS Triggered by
onClick, onSubmit, etc. RENDERING

Sometimes this is
not enough for the 👉 Effects allow us to
application’s needs write code that will
EVENT EFFECTS
run at different
HANDLERS (useEffect)
moments: mount, re-
render, or unmount

👉 REVIEW A side effect is basically any “interaction between a React component and the world outside the component”.
We can also think of a side as “code that actually does something”. Examples: Data fetching, setting up subscriptions,
setting up timers, manually accessing the DOM, etc.
:
:
 EVENT HANDLERS VS. EFFECTS
Produce the same result,
but at different moments
EVENT HANDLERS EFFECTS useEffect)

Effect

Cleanup
function

🤔 When?
Dependency array

👉 Executed when the corresponding event 👉 Executed after the component mounts (initial
happens render), and after subsequent re-renders
Thinking about
synchronization,
(according to dependency array)
👉 Used to react to an event not lifecycles
👉 Used to keep a component synchronized
with some external system (in this example,
☝ Preferred way of creating side effects!
with the API movie data)

We’ll come back to all this after using useEffect in practice...)

(
(
SECTION
EFFECTS AND DATA FETCHING

LECTURE
THE USEEFFECT DEPENDENCY
ARRAY
WHAT’S THE USEEFFECT DEPENDENCY ARRAY?

THE DEPENDENCY ARRAY

👉 By default, effects run after every render. We can

prevent that by passing a dependency array

👉 Without the dependency array, React doesn’t

know when to run the effect

👉 Each time one of the dependencies changes, the

effect will be executed again

☝ Every state variable and prop used inside the

effect MUST be included in the dependency array

Otherwise, we get a “stale

closure”. We will go more into
depth in a future section 👉
 USEEFFECT IS A SYNCHRONIZATION MECHANISM

👉 useEffect is like an event listener that is listening for one dependency to

THE MECHANICS change. Whenever a dependency changes, it will execute the effect again
OF EFFECTS
👉 Effects react to updates to state and props used inside the effect (the
dependencies). So effects are “reactive” (like state updates re-rendering the UI
DEPENDENCIES

title
CHANGES EFFECT IS DOCUMENT
EXECUTED TITLE
userRating AGAIN IS UPDATED
CHANGES

COMPONENT EXTERNAL SYSTEM

SYNCHRONIZE WITH
STATE/PROPS SIDE EFFECT
(
)
)
 SYNCHRONIZATION AND LIFECYCLE

EFFECT IS
DEPENDENCY EXECUTED AGAIN Effects and
STATE OR PROPS component lifecycle
CHANGES COMPONENT IS are deeply connected
RE RENDERED

👉 We can use the dependency array to run effects when the component renders or re-renders

🔄 SYNCHRONIZATION 🐣 LIFECYCLE

Effect synchronizes Runs on mount and re-renders

with x, y, and z triggered by updating x, y, or z

Effect synchronizes Runs only on mount

with no state/props (initial render)

Effect synchronizes Runs on every render

with everything (usually bad ⛔)
(
-
)
 WHEN ARE EFFECTS EXECUTED?
title = ‘Interstellar’ MOUNT INITIAL RENDER

COMMIT If an effect sets state, an

additional render will be required
BROWSER PAINT

EFFECT ✨

title CHANGES
title = ‘Interstellar Wars’
RE RENDER

COMMIT
Another type of effect
LAYOUT EFFECT
that is very rarely necessary
BROWSER PAINT (useLayoutEffect)

EFFECT ✨

UNMOUNT

time
-
(
)
SECTION
EFFECTS AND DATA FETCHING

LECTURE
THE USEEFFECT CLEANUP
FUNCTION
 WHEN ARE EFFECTS EXECUTED?
title = ‘Interstellar’ MOUNT INITIAL RENDER

COMMIT

BROWSER PAINT

EFFECT ✨

title CHANGES
title = ‘Interstellar Wars’
RE RENDER

COMMIT

LAYOUT EFFECT

BROWSER PAINT

CLEANUP 🧹

EFFECT ✨

UNMOUNT

CLEANUP 🧹
time
-
(
)
THE CLEANUP FUNCTION

USEEFFECT CLEANUP FUNCTION

Execute effect if
COMPONENT
dependency array
👉 Function that we can return from an effect RENDERS
includes updated data
(optional)

COMPONENT Execute
👉 Runs on two different occasions:
UNMOUNTS cleanup function
1 Before the effect is executed again

2 After a component has unmounted

Examples
✨ EFFECT 🧹 POTENTIAL
👉 Necessary whenever the side effect keeps CLEANUP
happening after the component has been
re-rendered or unmounted 👉 HTTP request Cancel request

👉 API subscription Cancel subscription

☝ Each effect should do only one thing! Use
one useEffect hook for each side effect. 👉 Start timer Stop timer
This makes effects easier to clean up
👉 Add event listener Remove listener
CUSTOM HOOKS,
REFS, AND MORE
STATE
SECTION
CUSTOM HOOKS, REFS, AND
MORE STATE

LECTURE
REACT HOOKS AND THEIR RULES
WHAT ARE REACT HOOKS?

REACT HOOKS

👉 Special built-in functions that allow us to “hook” into React internals:

👉 Creating and accessing state from Fiber tree

👉 Registering side effects in Fiber tree

👉 Manual DOM selections

👉 Many more…

👉 Always start with “use” (useState, useEffect, etc.)

👉 Enable easy reusing of non-visual logic: we can compose multiple hooks into
our own custom hooks

👉 Give function components the ability to own state and run side effects at
different lifecycle points (before v16.8 only available in class components)
OVERVIEW OF ALL BUILT IN HOOKS

🥇 MOST USED 📜 LESS USED 🗃 ONLY FOR LIBRARIES

✅ useState 👉 useRef ❌ useSyncExternalStore

✅ useEffect 👉 useCallback ❌ useInsertionEffect

👉 useReducer 👉 useMemo

👉 useContext 👉 useTransition

👉 useDeferredValue
❌ useLayoutEffect

❌ useDebugValue

❌ useImperativeHandle ✅ Have learned

❌ useId 👉 Will learn

👋 As of React v18.x ❌ Will not learn
-
THE RULES OF HOOKS

1 Only call hooks at the top level

👉 Do NOT call hooks inside conditionals, loops,

nested functions, or after an early return
☝ RULES OF 👉 This is necessary to ensure that hooks are always
HOOKS
called in the same order (hooks rely on this)

2 Only call hooks from React functions

👉 Only call hooks inside a function component or a

custom hook

👋 These rules are automatically enforced by React’s ESLint rules

HOOKS RELY ON CALL ORDER

FIBER
Props
..
.
ON INITIAL
RENDER List of hooks
REACT ELEMENT TREE FIBER TREE

☝ Hypothetical example! This

code does NOT work 1
State A State A
RENDER
1
7 2
State B State B
false
A=23
2
3
Effect Z A=7 Effect Z
3

List built based on

hooks call order LINKED LIST OF USED HOOKS
Violates A===23 is now false, so after re-
Rule #1 render, this hook would no longer
👉 Hooks need to called in the same order on every render exist, destroying the linked list 😢
HOOKS RELY ON CALL ORDER

FIBER
Props
..
.
ON INITIAL
RENDER List of hooks
REACT ELEMENT TREE FIBER TREE

Order num uniquely identifies each hook

👍 Correct code! 1
State A State A
RENDER
1
2
State B State B
SAME
2
3 ORDER
Effect Z Effect Z
3

List built based on

hooks call order LINKED LIST OF USED HOOKS
☝ Hooks can only be
👉 Hooks need to called in the same order on every render called at top level
SECTION
CUSTOM HOOKS, REFS, AND
MORE STATE

LECTURE
USESTATE SUMMARY
SUMMARY OF DEFINING AND UPDATING STATE

Simple

CREATING
1 STATE
Based on function
(lazy evaluation)

👉 Function must be pure and accept no

arguments. Called only on initial render
Make sure to NOT mutate objects
or arrays, but to replace them

Simple
UPDATING
2 STATE
Based on current state
👉 Function must be pure and return next state
 SECTION
CUSTOM HOOKS, REFS, AND
MORE STATE

LECTURE
INTRODUCING ANOTHER HOOK
USEREF
:
WHAT ARE REFS?

REF WITH useRef

👉 “Box” (object) with a mutable .current property that is

persisted across renders (“normal” variables are always reset) myRef

👉 Two big use cases: .current

(23)
(1000)
Creating a variable that stays the same between
1
renders (e.g. previous state, setTimeout id, etc.)

2 Selecting and storing DOM elements

We can write to and
read from the ref
👉 Refs are for data that is NOT rendered: usually only appear in using .current
event handlers or effects, not in JSX (otherwise use state)

☝ Do NOT read write or read .current in render logic (like state)

 STATE VS. REFS

PERSISTS ACROSS UPDATING CAUSES ASYNCHRONOUS

IMMUTABLE
RENDERS RE RENDER UPDATES

STATE ✅ ✅ ✅ ✅

REFS ✅ ❌ ❌ ❌

NO
Need to store data Will data change at some point? Regular const variable

Taken from lecture “Fundamentals YES

of state management”)
NO
Should it re-render component? Ref (useRef)

YES
Examples: preserving
State (useState) previous state, or storing
the id of a setTimeout
(
-
SECTION
CUSTOM HOOKS, REFS, AND
MORE STATE

LECTURE
WHAT ARE CUSTOM HOOKS?
WHEN TO CREATE ONE?
REUSING LOGIC WITH CUSTOM HOOKS

Function name needs

👉 “I need to reuse:”
to start with use

UI LOGIC

Does logic contain any hooks?

NO YES

REGULAR CUSTOM
COMPONENT
FUNCTION HOOK

👉 Allow us to reuse non-visual logic in multiple components

Unlike components,
👉 One custom hook should have one purpose, to make it Needs to use one can receive and
reusable and portable (even across multiple projects) or more hooks return any relevant
👉 Rules of hooks apply to custom hooks too data (usually [] or {})
REACT BEFORE
HOOKS CLASS
BASED REACT
:
-
 SECTION
REACT BEFORE HOOKS CLASS
BASED REACT

LECTURE
CLASS COMPONENTS VS.
FUNCTION COMPONENTS
:
-
FUNCTION COMPONENTS VS. CLASS COMPONENTS

Existed since beginning,

but without hooks
FUNCTION COMPONENTS CLASS COMPONENTS

📆 Introduced in v16.8 2019, with hooks) v0.13 2015

💎 How to create JavaScript function (any type) ES6 class, extending React.Component

🎛 Reading props Destructuring or props.X this.props.X

🚀 Local state useState hook Hooks are THE

this.setState()
big difference
✨ Side effects/lifecycle useEffect hook Lifecycle methods

☎ Event handlers Functions Class methods

💅 Returning JSX Return JSX from function Return JSX from render method

🏆 Advantages 👍 Easier to build (less boilerplate code) 👍 Lifecycle might be easier to

understand for beginners
👍 Cleaner code: useEffect combines all
lifecycle-related code in a single place
👍 Easier to share stateful logic
👍 We don’t need this keyword anymore
(
(
)
 PART 03
—
ADVANCED
REACT REDUX
+
 THE ADVANCED
USEREDUCER HOOK
SECTION
THE ADVANCED USEREDUCER
HOOK

LECTURE
MANAGING STATE WITH
USEREDUCER
WHY USEREDUCER?

👉 STATE MANAGEMENT WITH useState IS NOT ENOUGH IN CERTAIN SITUATIONS

When components have a lot of state variables and state updates,

1
spread across many event handlers all over the component

When multiple state updates need to happen at the same time (as a
2
reaction to the same event, like “starting a game”)

When updating one piece of state depends on one or multiple other

3
pieces of state

👉 IN ALL THESE SITUATIONS, useReducer CAN BE OF GREAT HELP

:
MANAGING STATE WITH USEREDUCER

STATE WITH useReducer

👉 An alternative way of setting state, ideal for complex

state and related pieces of state
Like setState()
👉 Stores related pieces of state in a state object
with superpowers

👉 useReducer needs reducer: function containing all logic

to update state. Decouples state logic from component

👉 reducer: pure function (no side effects! that takes

current state and action, and returns the next state

👉 action: object that describes how to update state

👉 dispatch: function to trigger state updates, by

“sending” actions from event handlers to the reducer
Instead of setState()
)
 HOW REDUCERS UPDATE STATE

useReducer

👉 Updating state Just like array.reduce(), reducers

in a component accumulate (“reduce”) actions over time
CURRENT
STATE

RETURNS
NEXT
dispatch reducer RE RENDER
STATE

action
type = ‘updateDay’ Object that contains information on
payload = 23 how the reducer should update state

useState

UPDATE
NEXT UPDATED
setState RE RENDER
STATE
UPDATED STATE
-
-
(
)
A MENTAL MODEL FOR REDUCERS

👉 REAL WORLD TASK WITHDRAWING $5,000 FROM YOUR BANK ACCOUNT

YOU DO NOT GO TO YOUR BANK AND TAKE MONEY

STRAIGHT FROM THE BANK’S VAULT 😂
-
:
 A MENTAL MODEL FOR REDUCERS

👉 REAL WORLD TASK WITHDRAWING $5,000 FROM YOUR BANK ACCOUNT

How to make the update)

I would like to withdraw ACTION

$5,000 from account 923577

DISPATCHER REDUCER STATE

Who requests the update) Who makes the update) What needs to be updated)
(
(
(
(
-
:
 SECTION
THE ADVANCED USEREDUCER
HOOK

LECTURE
SECTION SUMMARY USESTATE
VS. USEREDUCER
:
USESTATE VS. USEREDUCER

useState useReducer

👉 Ideal for single, independent pieces of 👉 Ideal for multiple related pieces of state
state (numbers, strings, single arrays, etc.) and complex state (e.g. object with many
values and nested objects or arrays)

👉 Logic to update state is placed directly in 👉 Logic to update state lives in one central
event handlers or effects, spread all over place, decoupled from components: the
one or multiple components reducer

👉 State is updated by calling setState 👉 State is updated by dispatching an action

(setter returned from useState) to a reducer

👉 Imperative state updates 👉 Declarative state updates: complex state

transitions are mapped to actions

👉 Easy to understand and to use 👉 More difficult to understand and implement

WHEN TO USE USEREDUCER?

YES
Just one piece of state?

NO

Do states frequently YES

update together?

NO
YES
Over 3 or 4 pieces of related Are you willing to implement NO
state, including objects? slightly more complex code?

NO YES

Too many event handlers make

useReducer
components large and confusing?
YES
NO

useState
☝ useState should remain your
default choice for managing state
 REACT ROUTER
BUILDING SINGLE
PAGE APPLICATIONS
SPA
(
)
:
-
 SECTION
REACT ROUTER BUILDING SINGLE
PAGE APPLICATIONS SPA

LECTURE
ROUTING AND SINGLE PAGE
APPLICATIONS SPAS
(
:
(
)
-
)
WHAT IS ROUTING?

“Client-side routing”
ROUTING

👉 With routing, we match different URLs to different UI views React components): routes

👉 This enables users to navigate between different applications screens, using the browser URL

👉 Keeps the UI in sync with the current browser URL

👉 Allows us to build Single-Page Applications

www.example.com/ www.example.com/login www.example.com/app

(
SINGLE PAGE APPLICATIONS SPA

SPA RUNNING ON CLIENT 👩💻

SINGLE PAGE APPLICATION

👉 Application that is executed User clicks router link

entirely on the client (browsers) In React, react-
router package
👉 Routes: different URLs correspond does this job
to different views (components) URL is changed

👉 JavaScript React) is used to

update the page DOM
DOM is updated:
👉 The page is never reloaded SERVER
React component
👉 Feels like a native app corresponding to the 🌐
new URL is rendered
👉 Additional data might be loaded
from a web API Load data
from web API
-
(
-
(
)
(
)
 SECTION
REACT ROUTER BUILDING SINGLE
PAGE APPLICATIONS SPA

LECTURE
STYLING OPTIONS FOR REACT
APPLICATIONS
:
(
)
 STYLING OPTIONS IN REACT
React doesn’t care about styling
STYLING OPTION WHERE? HOW? SCOPE BASED ON

Local
👉 Inline CSS JSX elements style prop JSX element CSS

Global, causes problems

👉 CSS or Sass file External file className prop Entire app CSS

One external file

👉 CSS Modules className prop Component CSS
per component

External file or Creates new

👉 CSS-in-JS Component JavaScript
component file component

👉 Utility-first CSS JSX elements className prop JSX element CSS

👋 Alternative to styling with CSS UI libraries like MUI, Chakra UI, Mantine, etc.
:
 SECTION
REACT ROUTER BUILDING SINGLE
PAGE APPLICATIONS SPA

LECTURE
STORING STATE IN THE URL
:
(
)
THE URL FOR STATE MANAGEMENT

👉 The URL is an excellent place to store UI state and an alternative to useState in some situations!
Examples: open/closed panels, currently selected list item, list sorting order, applied list filters

1 Easy way to store state in a global place, accessible to all components in the app

2 Good way to “pass” data from one page into the next page

3 Makes it possible to bookmark and share the page with the exact UI state it had at the time

www.example.com/app/cities/lisbon?lat=38.728&lng=-9.141

tools: path params query string

EXAMPLE PARAMS AND QUERY STRING

www.example.com/app/cities/lisbon?lat=38.728&lng=-9.141

👉 City name and GPS location were retrieved

from the URL instead of application state!

www.example.com/app/cities/berlin?lat=52.536&lng=13.377
:
 ADVANCED STATE
MANAGEMENT THE
CONTEXT API

:
 SECTION
ADVANCED STATE MANAGEMENT
THE CONTEXT API

LECTURE
WHAT IS THE CONTEXT API?
:
 A SOLUTION TO PROP DRILLING

👉 TASK Passing state into multiple deeply nested child components

💡 SOLUTION 1 PASSING PROPS ✅ SOLUTION 2 CONTEXT API

Components count count
that need
App App
count state
A C A C

B D E B D E

F F

⛔ PROBLEM “PROP DRILLING” 👍 READ STATE FROM EVERYWHERE

👋 Remember that a good solution to “prop drilling” is better component composition (see “Thinking in React” section)
:
:
:
:
 WHAT IS THE CONTEXT API?

CONTEXT API
READ VALUE value READ VALUE
Provider

ER
👉 System to pass data throughout the app

ND

RE
without manually passing props down the tree App

RE

RE
RE

ND
👉 Allows us to “broadcast” global state to the

ER
A C
entire app

Provider: gives all child components

B D E
1 Consumer)
access to value
F
value: data that we want to make Consumer)
2 A new way of re-rendering
available (usually state and functions)
components!
Consumers: all components that read the
3
provided context value value is All consumers
updated re-render
(
(
-
-
 SECTION
ADVANCED STATE MANAGEMENT
THE CONTEXT API

LECTURE
THINKING IN REACT ADVANCED
STATE MANAGEMENT
:
:
REVIEW WHAT IS STATE MANAGEMENT?

🏠 State management: Giving each piece of state the right home

✅ When to use state

✅ Types of state (accessibility): local vs. global

👉 Types of state (domain): UI vs. remote

👉 Where to place each piece of state

👉 Tools to manage all types of state

This lecture! From Lecture “Fundamentals of State

Management”. You can keep using this 👌
:
 TYPES OF STATE

1⃣ 🏠 LOCAL STATE VS. 🌍 GLOBAL STATE

STATE
👉 Needed only by one or few 👉 Might be needed by many
ACCESSIBILITY components components
NO
“If this component was
👉 Only accessible in component 👉 Accessible to every
rendered twice, should a
state update in one of them and child components component in the application
reflect in the other one?”

2⃣ 🌐 REMOTE STATE VS. 🪄 UI STATE

STATE
👉 All application data loaded 👉 Everything else 😅
DOMAIN from a remote server API
👉 Theme, list filters, form data, etc.
👉 Usually asynchronous
👉 Usually synchronous and stored
👉 Needs re-fetching + updating in the application
(
)
STATE PLACEMENT OPTIONS

TOOLS WHEN TO USE?

🤔 Where to place state?
👇 👇

🏠 Local component useState, useReducer, or useRef Local state

👪 Parent component useState, useReducer, or useRef Lifting up state

🌐 Context Context API useState or useReducer Global state (preferably UI state)

🗃 3rd-party library Redux, React Query, SWR, Zustand, etc. Global state (remote or UI

📍 URL React Router Global state, passing between pages

👩💻 Browser Local storage, session storage, etc. Storing data in user’s browser
+
)
 STATE MANAGEMENT TOOL OPTIONS

🤔 How to manage different 1⃣ STATE ACCESSIBILITY

types of state in practice?
🏠 LOCAL STATE 🌍 GLOBAL STATE

👉 useState 👉 Context API useState/useReducer

👉 useReducer 👉 Redux, Zustand, Recoil, etc.
2⃣ STATE DOMAIN

🪄 UI STATE
👉 useRef 👉 React Router

👉 fetch + useEffect + 👉 Context API useState/useReducer

useState/useReducer 👉 Redux, Zustand, Recoil, etc.
👉 React Query Tools highly
🌐 REMOTE STATE
specialized in
👉 SWR
handling remote
👉 RTK Query state
Mostly in small
applications
+
+
 PERFORMANCE
OPTIMIZATION AND
ADVANCED
USEEFFECT
SECTION
PERFORMANCE OPTIMIZATION
AND ADVANCED USEEFFECT

LECTURE
PERFORMANCE OPTIMIZATION
AND WASTED RENDERS
PERFORMANCE OPTIMIZATION TOOLS

PREVENT WASTED IMPROVE APP SPEED/ REDUCE BUNDLE

1 2 3
RENDERS RESPONSIVENESS SIZE

👉 memo 👉 useMemo 👉 Using fewer 3rd-party

packages
👉 useMemo 👉 useCallback
👉 Code splitting and lazy
👉 useCallback 👉 useTransition loading
👉 Passing elements as
children or regular prop

👋 This list of tools and techniques is, by no means, exhaustive. You’re already doing
many optimizations by following the best practices I have been showing you ✌
 WHEN DOES A COMPONENTS INSTANCE RE RENDER?

👉 A component instance only gets re-rendered in 3 different situations: Creates the false
impression that
changing props
re-renders a
🧠 🌐 👪 component. This
is NOT true.
STATE CONTEXT PARENT
CHANGES CHANGES RE RENDERS

👋 Remember: a render does not mean that the DOM actually gets updated, it just means
the component function gets called. But this can be an expensive operation.

Usually no problem, as
React is very fast!
👉 Wasted render: a render that didn’t produce any change in the DOM
👉 Only a problem when they happen too frequently or when the component is very slow
-
-
SECTION
PERFORMANCE OPTIMIZATION
AND ADVANCED USEEFFECT

LECTURE
UNDERSTANDING MEMO
WHAT IS MEMOIZATION?

👉 Memoization: Optimization technique that executes a pure function once, and saves the
result in memory. If we try to execute the function again with the same arguments as
before, the previously saved result will be returned, without executing the function again.

P U T S
NEW IN New calculated
Call Call result
Store
function A function A function A
result
SAME Cached result
IN PUTS

Cache

👉 Memoize components with memo

1 Prevent wasted renders
👉 Memoize objects with useMemo
2 Improve app speed/responsiveness
👉 Memoize functions with useCallback
THE MEMO FUNCTION
Memoized
component
memo
⛔ REGULAR BEHAVIOR NO MEMO)

👉 Used to create a component that will not re- Components Child

re-renders re-renders
render when its parent re-renders, as long
as the props stay the same between renders

👉 Only affects props! A memoized component

will still re-render when its own state
✅ MEMOIZED CHILD WITH MEMO
changes or when a context that it’s SAME
subscribed to changes PROPS Memoized child
does NOT
re-render
👉 Only makes sense when the component is Components
re-renders
heavy (slow rendering), re-renders often,
and does so with the same props Memoized child
NEW re-renders
PROPS
(
SECTION
PERFORMANCE OPTIMIZATION
AND ADVANCED USEEFFECT

LECTURE
UNDERSTANDING USEMEMO AND
USECALLBACK
AN ISSUE WITH MEMO

In React, everything is re-created on every render (including

objects and functions)

In JavaScript, two objects or functions that look the same, are

actually different ({} != {})

THEREFORE

If objects or functions are passed as props, the child component

will always see them as new props on each re-render

If props are different between re-renders, memo will not work

SOLUTION

We need to memoize objects and functions, to make them stable

(preserve) between re-renders (memoized {} == memoized {})
TWO NEW HOOKS USEMEMO AND USECALLBACK

useMemo AND useCallback

⛔ REGULAR BEHAVIOR NO USEMEMO)

👉 Used to memoize values (useMemo) and

Components
functions (useCallback) between renders New value
re-renders

👉 Values passed into useMemo and useCallback

will be stored in memory (“cached”) and
returned in subsequent re-renders, as long as
✅ MEMOIZING A VALUE WITH USEMEMO
dependencies (“inputs”) stay the same
Dependencies SAME
👉 useMemo and useCallback have a DEPS Cached value
is returned.
dependency array (like useEffect): whenever
NO new value
one dependency changes, the value will be Components
re-renders
re-created
New value
DEPS
CHANGE
(
:
TWO NEW HOOKS USEMEMO AND USECALLBACK

useMemo AND useCallback

THREE BIG USES CASES

👉 Used to memoize values (useMemo) and
functions (useCallback) between renders
Memoizing props to prevent wasted
1
👉 Values passed into useMemo and useCallback renders (together with memo)
will be stored in memory (“cached”) and
returned in subsequent re-renders, as long as Memoizing values to avoid expensive
2
dependencies (“inputs”) stay the same re-calculations on every render

👉 useMemo and useCallback have a Memoizing values that are used in

dependency array (like useEffect): whenever 3
dependency array of another hook
one dependency changes, the value will be
re-created
For example to
avoid infinite
👉 Only use them for one of the three use cases!
useEffect loops
:
:
SECTION
PERFORMANCE OPTIMIZATION
AND ADVANCED USEEFFECT

LECTURE
OPTIMIZING BUNDLE SIZE WITH
CODE SPLITTING
THE BUNDLE AND CODE SPLITTING

SERVER ON INITIAL LOAD CLIENT SPA RUNS ENTIRELY

Produced by a
tool like Webpack
🌐 👩💻 ON THE CLIENT
NO MORE FILES
(inside create-
ARE LOADED
react-app) or Vite

👉 Bundle: JavaScript file containing the entire application code. Downloading the bundle will load the
entire app at once, turning it into a SPA

👉 Bundle size: Amount of JavaScript users have to download to start using the app. One of the most
important things to be optimized, so that the bundle takes less time to download

👉 Code splitting: Splitting bundle into multiple parts that can be downloaded over time (“lazy loading”)
SECTION
PERFORMANCE OPTIMIZATION
AND ADVANCED USEEFFECT

LECTURE
DON'T OPTIMIZE PREMATURELY!
DON'T OPTIMIZE PREMATURELY!

DO DON’T!

✅ Find performance bottlenecks using the 🚫 Don’t optimize prematurely!

Profiler and visual inspection (laggy UI
🚫 Don’t optimize anything if there is
✅ Fix those real performance issues nothing to optimize...

✅ Memoize expensive re-renders 🚫 Don’t wrap all components in memo()

✅ Memoize expensive calculations 🚫 Don’t wrap all values in useMemo()

✅ Optimize context if it has many 🚫 Don’t wrap all functions in

consumers and changes often useCallback()

✅ Memoize context value + child components 🚫 Don’t optimize context if it’s not slow
and doesn’t have many consumers
✅ Implement code splitting + lazy loading
for SPA routes
)
SECTION
PERFORMANCE OPTIMIZATION
AND ADVANCED USEEFFECT

LECTURE
USEEFFECT RULES AND BEST
PRACTICES
USEEFFECT DEPENDENCY ARRAY RULES
Reactive value: state, prop, or context value, or
DEPENDENCY ARRAY RULES any other value that references a reactive value

☝ Every state variable, prop, and context value

used inside the effect MUST be included in the
dependency array

☝ All “reactive values” must be included! That

means any function or variable that reference any
other reactive value

☝ Dependencies choose themselves: NEVER ignore

the exhaustive-deps ESLint rule!
All reactive values
used in effect
☝ Do NOT use objects or arrays as dependencies
(objects are recreated on each render, and React
sees new objects as different, {} !== {}) 👋 The same rules apply to the dependency arrays
of other hooks: useMemo and useCallback
REMOVING UNNECESSARY DEPENDENCIES

🤖 REMOVING FUNCTION DEPENDENCIES

👉 Move function into the effect

👉 If you need the function in multiple places, memoize it (useCallback)

👉 If the function doesn't reference any reactive values, move it out of the component

📦 REMOVING OBJECT DEPENDENCIES

👉 Instead of including the entire object, include only the properties you need (primitive values)

👉 If that doesn’t work, use the same strategies as for functions (moving or memoizing object)

🎯 OTHER STRATEGIES

👉 If you have multiple related reactive values as dependencies, try using a reducer (useReducer)

👉 You don’t need to include setState (from useState) and dispatch (from useReducer) in the
dependencies, as React guarantees them to be stable across renders
WHEN NOT TO USE AN EFFECT

☝ Effects should be used as a last resort, when no other solution makes

sense. React calls them an “escape hatch” to step outside of React

Avoid these as a beginner

THREE CASES WHERE EFFECTS ARE OVERUSED

1 Responding to a user event. An event handler function should be used instead

Fetching data on component mount. This is fine in small apps, but in real-world
2
app, a library like React Query should be used

Synchronizing state changes with one another (setting state based on

3
another state variable). Try to use derived state and event handlers

We actually do this in the current

project, but for a good reason 😅
:
 REDUX AND MODERN
REDUX TOOLKIT
WITH THUNKS
(
)
 SECTION
REDUX AND MODERN REDUX
TOOLKIT WITH THUNKS

LECTURE
INTRODUCTION TO REDUX
(
)
WHAT IS REDUX?

REDUX

👉 3rd-party library to manage global state

👉 Standalone library, but easy to integrate with React apps using

Global store is
updated
react-redux library

👉 All global state is stored in one globally accessible store,

which is easy to update using “actions” (like useReducer)

👉 It’s conceptually similar to using the Context API useReducer

All consuming
components re-render
👉 Two “versions”: 1 Classic Redux, 2 Modern Redux Toolkit

We will learn both 😎

☝ You need to have a really good understanding of the useReducer hook in order to understand Redux!
(
)
(
)
+
DO YOU NEED TO LEARN REDUX?

👋 Historically, Redux was used in most React apps for all global state. Today, that has changed, because there
are many alternatives. Many apps don’t need Redux anymore, unless they need a lot of global UI state.

You might not need to learn Redux…

🤔 WHY LEARN REDUX IN THIS COURSE?

1 Redux can be hard to learn, and this course teaches it well 😅

2 You will encounter Redux code in your job, so you should understand it

3 Some apps do require Redux (or a similar library)

REDUX USE CASES

👋 Historically, Redux was used in most React apps for all global state. Today, that has changed, because there
are many alternatives. Many apps don’t need Redux anymore, unless they need a lot of global UI state.

Ideal use case for

Redux, when there is
lots of state that
updates frequently

For remote global

state, we have better,
more specialized tools

THE REASON WHY MANY

APPS DON’T USE REDUX
 THE MECHANISM OF THE USEREDUCER HOOK

EVENT HANDLER
dispatch
IN COMPONENT
action
type = ‘deposit’
payload = 50

Object that contains

information on how the reducer
should update state

NEXT
RE RENDER reducer
STATE

CURRENT
STATE
-
 THE MECHANISM OF REDUX
action
type = ‘deposit’
payload = 50
EVENT HANDLER
dispatch
IN COMPONENT

All global state lives in this centralized

container. It’s the single source of truth
STORE
of global state in the app

reducer

NEXT reducer
RE RENDER
STATE ...

reducer

Each reducer is a pure function that calculates the next state (state CURRENT
transition) based on the action and the current state. Usually one STATE
reducer per app feature (e.g. shopping cart + user data + theme)
-
 THE MECHANISM OF REDUX

EVENT HANDLER Action creator

function
dispatch
IN COMPONENT
action
type = ‘deposit’
payload = 50
To automate writing action. Helpful to
keep all possible actions in one central
STORE
place. This is a convention, not a must)

reducer

NEXT reducer
RE RENDER
STATE ...

reducer

👉 Redux cycle CURRENT

STATE
👉 Goal: make the state update logic separate from
the rest of the application
-
(
 THE MECHANISM OF REDUX

EVENT HANDLER Action creator

function
dispatch
IN COMPONENT
action
type = ‘deposit’
I would like to payload = 50
deposit $50 from my
account
STORE

reducer

NEXT reducer
RE RENDER
STATE ...

reducer

CURRENT
👉 REAL WORLD TASK DEPOSITING STATE
$50 INTO YOUR BANK ACCOUNT
-
-
:
 SECTION
REDUX AND MODERN REDUX
TOOLKIT WITH THUNKS

LECTURE
REDUX MIDDLEWARE AND
THUNKS
(
)
 WHAT IS REDUX MIDDLEWARE?

🤔 Where to make an asynchronous API call (or any other async operation) in Redux?

A function that sits between dispatching the action and

the store. Allows us to run code after dispatching, but
before reaching the reducer in the store.

COMPONENT dispatch MIDDLEWARE STORE

🤷 Can make asynchronous 🚫 No asynchronous

operations and then dispatch operations
👍 Perfect for asynchronous code
🤷 Fetching data in components 🚫 Reducers need to
is not ideal 👍 API calls, timers, logging, etc. be pure functions

👍 The place for side effects

 REDUX THUNKS

🤔 Where to make an asynchronous API call (or any other async operation) in Redux?

action action
type = ‘deposit’ type = ‘deposit’
payload = 50 payload = {data}

THUNK
COMPONENT dispatch STORE
MIDDLEWARE

🤷 Can make asynchronous 🚫 No asynchronous

operations and then dispatch operations
👍 Perfect for asynchronous code
🤷 Fetching data in components 🚫 Reducers need to
is not ideal 👍 API calls, timers, logging, etc. be pure functions

👍 The place for side effects

 SECTION
REDUX AND MODERN REDUX
TOOLKIT WITH THUNKS

LECTURE
WHAT IS REDUX TOOLKIT RTK ?
(
)
(
)
WHAT IS REDUX TOOLKIT?

REDUX TOOLKIT

👉 The modern and preferred way of writing Redux code

👉 An opinionated approach, forcing us to use Redux best practices

👉 100% compatible with “classic” Redux, allowing us to use them together

👉 Allows us to write a lot less code to achieve the same result (less “boilerplate”)

👉 Gives us 3 big things (but there are many more…):

We can write code that “mutates” state inside reducers (will be

1
converted to immutable logic behind the scenes by “Immer” library)

2 Action creators are automatically created

3 Automatic setup of thunk middleware and DevTools

 SECTION
REDUX AND MODERN REDUX
TOOLKIT WITH THUNKS

LECTURE
REDUX VS. CONTEXT API
(
)
CONTEXT API VS. REDUX

CONTEXT API useReducer REDUX

👍 Built into React 👎 Requires additional package (larger bundle size)

👍 Easy to set up a single context 👎 More work to set up initially

👎 Additional state “slide” requires new context 👍 Once set up, it’s easy to create additional state
set up from scratch (“provider hell” in App.js) “slices”

👎 No mechanism for async operations 👍 Supports middleware for async operations

👎 Performance optimization is a pain 👍 Performance is optimized out of the box

👎 Only React DevTools 👍 Excellent DevTools

Keep in mind that we should not use

these solutions for remote state
+
WHEN TO USE CONTEXT API OR REDUX?

CONTEXT API useReducer REDUX

These are not
super common
“Use the Context API for global state “Use Redux for global state
in UI state
management in small apps” management in large apps”

👉 When you just need to share a value that 👉 When you have lots of global UI state that
doesn’t change often Color theme, needs to be updated frequently (because
preferred language, authenticated user, …] Redux is optimized for this) [Shopping cart,
current tabs, complex filters or search, …]
👉 When you need to solve a simple prop
drilling problem 👉 When you have complex state with nested
objects and arrays (because you can
👉 When you need to manage state in a local mutate state with Redux Toolkit)
sub-tree of the app
For example in the compound component pattern

👋 There is no right answer that fits every project. It all depends on the project needs!
+
[
 PART 04
—
PROFESSIONAL
REACT
DEVELOPMENT
REACT ROUTER WITH
DATA LOADING V6.4

(
+
)
 SECTION
REACT ROUTER WITH DATA
LOADING V6.4

LECTURE
APPLICATION PLANNING
(
+
)
THE PROJECT 🍕 FAST REACT PIZZA CO.

REMEMBER OUR VERY FIRST PROJECT?

👉 Now the same restaurant (business)

needs a simple way of allowing
customers to order pizzas and get
them delivered to their home

👉 We were hired to build the application

front-end 🎉
:
🎯 HOW TO PLAN AND BUILD A REACT APPLICATION

FROM THE EARLIER “THINKING IN REACT” LECTURE

1 Break the desired UI into components

2 Build a static version (no state yet)

3 Think about state management + data flow

👉 This works well for small apps with one page and a few features

👉 In real-world apps, we need to adapt this process

:
🎯 HOW TO PLAN AND BUILD A REACT APPLICATION

This is just a rough

1 Gather application requirements and features
overview. In the real-world,
things are never this linear

2 Divide the application into pages

👉 Think about the overall and page-level UI

👉 Break the desired UI into components From earlier

👉 Design and build a static version (no state yet) From earlier

3 Divide the application into feature categories

👉 Think about state management + data flow From earlier

4 Decide on what libraries to use (technology decisions)

👨💼 PROJECT REQUIREMENTS FROM THE BUSINESS

STEP 1
👉 Very simple application, where users can order one or more pizzas from a menu

👉 Requires no user accounts and no login: users just input their names before using the app

👉 The pizza menu can change, so it should be loaded from an API ✅ DONE

From these requirements, we

👉 Users can add multiple pizzas to a cart before ordering can understand the features
we need to implement
👉 Ordering requires just the user’s name, phone number, and address

👉 If possible, GPS location should also be provided, to make delivery easier

👉 User’s can mark their order as “priority” for an additional 20% of the cart price

👉 Orders are made by sending a POST request with the order data (user data + selected pizzas) to the API

👉 Payments are made on delivery, so no payment processing is necessary in the app

👉 Each order will get a unique ID that should be displayed, so the user can later look up their order based on the ID

👉 Users should be able to mark their order as “priority” order even after it has been placed
FEATURES PAGES

STEP 2 3

FEATURE CATEGORIES NECESSARY PAGES

1⃣ User 1⃣ Homepage /

2⃣ Menu 2⃣ Pizza menu /menu

3⃣ Cart 3⃣ Cart /cart

4⃣ Order 4⃣ Placing a new order /order/new

5⃣ Looking up an order /order/:orderID

All features can be placed into

one of these. So this is what the
app will essentially be about
+
+
STATE MANAGEMENT TECHNOLOGY DECISIONS

STEP 3 4
STATE 1⃣ User Global UI state (no accounts, so stays in app)
“DOMAINS” /
“SLICES” 2⃣ Menu Global remote state (menu is fetched from API
TYPES OF
STATE
3⃣ Cart Global UI state (no need for API, just stored in app)
These usually map
quite nicely to the 4⃣ Order Global remote state (fetched and submitted to API
app features
This is just one of many tech
stacks we could have chosen
👉 Routing The standard for React SPAs

👉 Styling Trendy way of styling applications that we want to learn

New way of fetching data right inside React Router (v6.4 that is
👉 Remote state
worth exploring (“render-as-you-fetch” instead of “fetch-on-
management render”). Not really state management, as it doesn't persist state.

👉 UI State State is fairly complex. Redux has many advantages for UI state.
management Also, we want to practice Redux a bit more
+
+
)
)
+
)
TAILWIND CSS CRASH
COURSE STYLING
THE APP
:
 SECTION
TAILWIND CSS CRASH COURSE
STYLING THE APP

LECTURE
WHAT IS TAILWIND CSS?
:
WHAT IS TAILWIND CSS?

TAILWIND CSS

👉 “A utility-first CSS framework packed with utility classes like flex, text-center and
rotate-90 that can be composed to build any design, directly in your markup HTML or JSX ”

👉 Utility-first CSS approach: writing tiny classes with one single purpose, and then combining
them to build entire layouts

👉 In tailwind, these classes are already written for us. So we’re not gonna write any new CSS,
but instead use some of tailwind’s hundreds of classes

(
)
THE GOOD AND BAD ABOUT TAILWIND

These two are enough

THE GOOD to give tailwind a try! THE BAD

👍 You don’t need to think about class names 👎 Markup HTML or JSX looks very unreadable,
with lots of class names (you get used to it)
👍 No jumping between files to write markup and
styles 👎 You have to learn a lot of class names (but
after a day of usage you know fundamentals)
👍 Immediately understand styling in any project
that uses tailwind 👎 You need to install and set up tailwind on each
new project
👍 Tailwind is a design system: many design
decisions have been taken for you, which 👎 You’re giving up on “vanilla CSS” 😢
makes UIs look better and more consistent

👍 Saves a lot of time, e.g. on responsive design 👋 Many people love to hate on tailwind
for no reason. Please don’t be that
👍 Docs and VS Code integration are great
person! Try it before judging 🙏
(
)
 SETTING UP OUR
BIGGEST PROJECT
STYLED
COMPONENTS

+
 SECTION
SETTING UP OUR BIGGEST
PROJECT STYLED COMPONENTS

LECTURE
APPLICATION PLANNING
+
THE PROJECT THE WILD OASIS

👉 “The Wild Oasis” is a small boutique hotel with 8

luxurious wooden cabins

👉 They need a custom-built application to manage

everything about the hotel: bookings, cabins
and guests

👉 This is the internal application used inside the

API
hotel to check in guests as they arrive
Later
👉 They have nothing right now, so they also need
the API

👉 Later they will probably want a customer-facing

CUSTOMER FACING
INTERNAL HOTEL website as well, where customers will be able to
WEBSITE TO BOOK
MANAGEMENT APP
STAYS book stays, using the same API
-
:
REVIEW HOW TO PLAN A REACT APPLICATION

1 Gather application requirements and features

2 Divide the application into pages

3 Divide the application into feature categories

4 Decide on what libraries to use (technology decisions)

:
👨💼 PROJECT REQUIREMENTS FROM THE BUSINESS
👉 Users of the app are hotel employees. They need to be logged into the application to perform tasks
STEP 1
👉 New users can only be signed up inside the applications (to guarantee that only actual hotel employees can get accounts)
👉 Users should be able to upload an avatar, and change their name and password
👉 App needs a table view with all cabins, showing the cabin photo, name, capacity, price, and current discount
👉 Users should be able to update or delete a cabin, and to create new cabins (including uploading a photo)
👉 App needs a table view with all bookings, showing arrival and departure dates, status, and paid amount, as well as cabin and guest data
👉 The booking status can be “unconfirmed” (booked but not yet checked in), “checked in”, or “checked out”. The table should be filterable
by this important status
👉 Other booking data includes: number of guests, number of nights, guest observations, whether they booked breakfast, breakfast price
👉 Users should be able to delete, check in, or check out a booking as the guest arrives (no editing necessary for now)
👉 Bookings may not have been paid yet on guest arrival. Therefore, on check in, users need to accept payment (outside the app), and
then confirm that payment has been received (inside the app)
👉 On check in, the guest should have the ability to add breakfast for the entire stay, if they hadn’t already
👉 Guest data should contain: full name, email, national ID, nationality, and a country flag for easy identification
👉 The initial app screen should be a dashboard, to display important information for the last 7, 30, or 90 days:
👉 A list of guests checking in and out on the current day. Users should be able to perform these tasks from here
👉 Statistics on recent bookings, sales, check ins, and occupancy rate
👉 A chart showing all daily hotel sales, showing both “total” sales and “extras” sales (only breakfast at the moment)
👉 A chart showing statistics on stay durations, as this is an important metric for the hotel
👉 Users should be able to define a few application-wide settings: breakfast price, min and max nights/booking, max guests/booking
👉 App needs a dark mode
👨💼 PROJECT REQUIREMENTS FROM THE BUSINESS
👉 Users of the app are hotel employees. They need to be logged into the application to perform tasks
STEP 1
AUTHENTICATION
👉 New users can only be signed up inside the applications (to guarantee that only actual hotel employees can get accounts)
👉 Users should be able to upload an avatar, and change their name and password
👉 App needs a table view with all cabins, showing the cabin photo, name, capacity, price, and current discount
CABINS
👉 Users should be able to update or delete a cabin, and to create new cabins (including uploading a photo)
👉 App needs a table view with all bookings, showing arrival and departure dates, status, and paid amount, as well as cabin and guest data
👉 The booking status can be “unconfirmed” (booked but not yet checked in), “checked in”, or “checked out”. The table should be filterable
BOOKINGS
by this important status
👉 Other booking data includes: number of guests, number of nights, guest observations, whether they booked breakfast, breakfast price
👉 Users should be able to delete, check in, or check out a booking as the guest arrives (no editing necessary for now)
👉 Bookings may not have been paid yet on guest arrival. Therefore, on check in, users need to accept payment (outside the app), and
CHECK IN / OUT
then confirm that payment has been received (inside the app)
👉 On check in, the guest should have the ability to add breakfast for the entire stay, if they hadn’t already
👉 Guest data should contain: full name, email, national ID, nationality, and a country flag for easy identification GUESTS
👉 The initial app screen should be a dashboard, to display important information for the last 7, 30, or 90 days:
👉 A list of guests checking in and out on the current day. Users should be able to perform these tasks from here
👉 Statistics on recent bookings, sales, check ins, and occupancy rate DASHBOARD
👉 A chart showing all daily hotel sales, showing both “total” sales and “extras” sales (only breakfast at the moment)
👉 A chart showing statistics on stay durations, as this is an important metric for the hotel
👉 Users should be able to define a few application-wide settings: breakfast price, min and max nights/booking, max guests/booking
SETTINGS
👉 App needs a dark mode
FEATURES PAGES

STEP 2 3
FEATURE CATEGORIES NECESSARY PAGES

1⃣ Bookings 1⃣ Dashboard /dashboard

2⃣ Cabins 2⃣ Bookings /bookings

3⃣ Guests 3⃣ Cabins /cabins

4⃣ Dashboard 4⃣ Booking check in /checkin/:bookingID

5⃣ Check in and out 5⃣ App settings /settings

6⃣ App settings 6⃣ User sign up /users

7⃣ Authentication 7⃣ Login /login

8⃣ Account settings /account

👋 We will discuss state later.
Most of it will be global
+
+
CLIENT SIDE RENDERING CSR OR SERVER SIDE RENDERING SSR ?

CSR WITH PLAIN REACT SSR WITH FRAMEWORK

👉 Used to build Single-Page Applications SPAs) 👉 Used to build Multi-Page Applications MPAs)

👉 All HTML is rendered on the client 👉 Some HTML is rendered in the server

👉 All JavaScript needs to be downloaded before 👉 More performant, as less JavaScript needs to
apps start running: bad for performance be downloaded

👉 One perfect use case: apps that are used 👉 The React team is moving more and more in
“internally” as tools inside companies, that are this direction
entirely hidden behind a login

This is exactly what

we want to build in
this project
STEP 4
-
(
(
(
)
-
(
)
TECHNOLOGY DECISIONS

STEP 4
👉 Routing The standard for React SPAs

Very popular way of writing component-scoped CSS, right

👉 Styling
inside JavaScript. A technology worth learning

The best way of managing remote state, with features like

👉 Remote state
caching, automatic re-fetching, pre-fetching, offline support, etc.
management Alternatives are SWR and RTK Query, but this is the most popular

👉 UI State There is almost no UI state needed in this app, so one simple

Context API context with useState will be enough. No need for Redux
management

👉 Form Handling bigger forms can be a lot of work, such as manual

management state creation and error handling. A library can simplify all this

👉 Other tools React icons / React hot toast / Recharts / date-fns / Supabase
 SUPABASE CRASH
COURSE BUILDING A
BACK END!
-
:
 SECTION
SUPABASE CRASH COURSE
BUILDING A BACK END!

LECTURE
WHAT IS SUPABASE?
-
:
WHAT IS SUPABASE?

SUPABASE 🌐 BACK END

👉 Service that allows developers to easily create a

back-end with a Postgres database

👉 Automatically creates a database and API so we

can easily request and receive data from the server

👉 No back-end development needed 🥳

WITH SUPABASE, WE DON’T NEED
👉 Perfect to get up and running quickly! TO DO ANY OF THIS MANUALLY!
IT’S ALL INCLUDED
👉 Not just an API Supabase also comes with easy-
to-use user authentication and file storage
-
:
 SECTION
SUPABASE CRASH COURSE
BUILDING A BACK END!

LECTURE
MODELING APPLICATION STATE
-
:
MODELING STATE

STATE “DOMAINS” / “SLICES” FEATURE CATEGORIES

1⃣ Bookings 1⃣ Bookings
2⃣ Cabins 2⃣ Cabins
3⃣ Guests 3⃣ Guests
4⃣ Settings 4⃣ Dashboard
5⃣ Users 5⃣ Check in and out
6⃣ App settings
7⃣ Authentication

👉 All this state will be global remote state, stored within Supabase
👉 There will be one table for each state “slice” in the database
THE BOOKINGS TABLE

👉 Bookings are about a guest renting a cabin

👉 So a booking needs information about what guest is booking which cabin: we need to connect them

👉 Supabase uses a Postgres DB, which is SQL (relational DB . So we join tables using foreign keys

BOOKING

id guestId cabinId ...

We connect a booking with a cabin by

storing the cabin’s id (primary key)
inside the booking cabinId (foreign key)

id email ... id name ...

GUEST CABIN
)
 REACT QUERY
MANAGING REMOTE
STATE
:
 SECTION
REACT QUERY MANAGING
REMOTE STATE

LECTURE
WHAT IS REACT QUERY?
:
WHAT IS REACT QUERY?

REACT QUERY
API

👉 Powerful library for managing remote (server) state

NO ADDITIONAL
👉 Many features that allow us to write a lot less code, API REQUEST

while also making the UX a lot better:

👉 Data is stored in a cache

👉 Automatic loading and error states
👉 Automatic re-fetching to keep state synched
CACHE “cabins”

👉 Pre-fetching
👉 Easy remote state mutation (updating)
👉 Offline support
fetch(“api.com fetch(“api.com
👉 Needed because remote state is fundamentally /cabins”) /cabins”)
different from regular UI state
COMPONENT A COMPONENT B
(
)
ADVANCED REACT
PATTERNS
SECTION
ADVANCED REACT PATTERNS

LECTURE
AN OVERVIEW OF REUSABILITY IN
REACT
 HOW TO REUSE CODE IN REACT?

Logic with hooks

Use props as a component 👉 I need to reuse:
API, to enable custom
behavior. Can be stateless,
stateful, or structural UI STATEFUL LOGIC
components For complete control over
what the component
Components renders, by passing in a
Custom hooks
and props function that tells the
component what to render.
Was more common before
children prop hooks, but still useful

To customize the
component’s content Render props pattern

Compound component pattern

👋 There are even more patterns, For very self-contained components that need/want to manage their
but these ones matter most own state. Compound components are like fancy super-components
 PART 05
—
FULL STACK
REACT
-
OVERVIEW OF NEXT.JS
WITH THE "APP"
ROUTER
 SECTION
OVERVIEW OF NEXT.JS WITH THE
"APP" ROUTER

LECTURE
AN OVERVIEW OF SERVER SIDE
RENDERING SSR
(
)
-
REVIEW THE RISE OF SINGLE PAGE APPLICATIONS

1 THE “OLD” WAY 3 GETTING MODERN AGAIN SERVER SIDE RENDERING

RENDER
BROWSER
WEBPAGE

🌐 SERVER / BACK END 👩💻 CLIENT / FRONT END

CLIENT SIDE RENDERING

2 THE “MODERN” WAY

RENDER
API BROWSER
WEBPAGE
-
-
:
-
-
-
CLIENT SIDE RENDERING CSR VS. SERVER SIDE RENDERING SSR

CLIENT SIDE RENDERING SERVER SIDE RENDERING

👉 HTML is rendered on the client (the user’s 👉 HTML is rendered on the server (the
computer) using JavaScript developer’s computer)

👎 Slower initial page loads: 👍 Faster initial page loads:

👉 Bigger JavaScript bundle needs to be 👉 Less JavaScript needs to be downloaded

downloaded before app starts running and executed

👉 Data is fetched after components mount 👉 Data is fetched before HTML is rendered

👍 Highly interactive: All the code and content 👎 Less interactive: Pages might be downloaded
has already been loaded (except data) on demand and require full page reloads

👎 SEO can be problematic 👍 SEO-friendly: Content is easier for search

engines to index
-
-
-
(
)
-
(
)
WHEN TO USE CSR AND SSR?

CLIENT SIDE RENDERING SERVER SIDE RENDERING

👉 SPAs: Perfect for building highly interactive 👉 Content-driven websites or apps where SEO
web apps is essential: E-commerce, blogs, news,
marketing websites, etc.
👉 Apps that don’t need SEO

👉 Apps that are used “internally” as tools More on this

inside companies later

👉 Apps that are entirely hidden behind a login

TWO TYPES OF SSR

Static: HTML generated at build time (often

1
This is what we’ve called Static Site Generation, or SSG
been doing so far
Dynamic: HTML generated each time server
2
receives new request (some call only this SSR
-
-
:
:
)
)
TYPICAL TIMELINE OF CSR VS. SSR WITH DATA FETCHING

First paint FCP Content paint LCP

SERVER Empty
Fetch data
🌐 page

CSR
CLIENT Download Render Render app
👩💻 JS bundle spinner with data

Moved to the server

First paint FCP ⚡ Much faster!

Content paint LCP
SERVER Render app
Fetch data
🌐 with data

SSR
CLIENT Download
Hydrate
👩💻 JS bundle
(
(
(
(
)
)
)
)
 SECTION
OVERVIEW OF NEXT.JS WITH THE
"APP" ROUTER

LECTURE
THE MISSING PIECE HYDRATION
:
WHAT IS HYDRATION?

HYDRATION
React component tree

SERVER 👉 Adds back the interactivity and event

🌐 handlers that were lost when HTML was
The React server-side rendered
SSRd HTML bundle is
sent as well
👉 Watering the “dry” HTML with the “water”
of interactivity and event handlers

👉 React builds the component tree on the

Content paint LCP
client and compares it with the actual
Rendered SSRd DOM They must be the same so
Hydration
webpage DOM React can adopt it!
CLIENT
👩💻 👉 Common hydration error causes:
incorrect HTML element nesting,
React app different data used for rendering, using
Page interactive
browser-only APIs, side effects, etc.
:
(
)
SECTION
OVERVIEW OF NEXT.JS WITH THE
"APP" ROUTER

LECTURE
WHAT IS NEXT.JS?
WHAT IS NEXT.JS?

NEXT.JS

“THE REACT FRAMEWORK FOR THE WEB”

👉 Meta-framework built on top of React: we still use

components, props, react hooks, etc.

👉 Opinionated way of building React apps: Set of conventions

and best practices regarding routing, data fetching, etc.

👉 Allows us to build complex full-stack web apps and sites

👉 Allows us to use cutting-edge React features that need to

be integrated into a framework: Suspense, Server
Components, Server Actions, steaming, etc. React’s full-stack
architecture vision
 THE NEXT.JS KEY INGREDIENTS

SERVER SIDE DATA

FILE BASED
RENDERING FETCHING AND
ROUTING OPTIMIZATIONS
DYNAMIC MUTATION ON
CONVENTIONS
AND STATIC THE SERVER

👉 Dynamic or static 👉 Folders as routes 👉 Fetching data 👉 Images

can be selected 👉 Special files for directly in Server 👉 Fonts
for each route pages, layouts, Components
👉 SEO
loaders, etc. 👉 Mutations in
👉 Preloading
Server Actions
(
-
-
)
 TWO FLAVOURS OF NEXT.JS "APP" AND "PAGES" ROUTER

MODERN NEXT.JS “APP” ROUTER LEGACY NEXT.JS “PAGES” ROUTER

👉 Introduced in Next.js 13.4 2023 👉 The first Next.js router since v1 2016

👉 Recommend for new projects 👉 Still supported and updated in the future

👉 Implements React’s full-stack architecture: Server

👍 Overall more simple and easy to learn
Components, Server Actions, Streaming, etc.

👎 Simple things like layouts are confusing to

👍 Easy fetching with fetch() right in components implement

👍 Extremely easy to create layouts, loaders, etc. 👎 Data fetching using Next.js-specific APIs such
as getStaticProps and getServerSideProps
👍 More advanced routing (parallel routing, etc.)

👍 Better DX Developer Experience) and UX

👋 We’re gonna learn the “app” router from
👎 Caching is very aggressive and confusing the start. At the end, there is a section on
the fundamentals of the “pages” router
👎 Steep learning curve (but it’s React)
(
:
:
(
(
)
)
:
SECTION
OVERVIEW OF NEXT.JS WITH THE
"APP" ROUTER

LECTURE
WHAT ARE REACT SERVER
COMPONENTS?
WHY REACT SERVER COMPONENTS?
We “hack” this by storing Closer to what a
fetched data in state too real-world app is

UI = f(state) UI = f(data)
UI = f(data, state)
100% 100%
Client-Side Server-side

👍 Interactive RSC 👎 NO components

👍 Components 👍 Easy and fast to fetch all data

👎 Requires lots of JS 👍 Close to the data source

👎 Client-server data waterfalls 👍 Needs to ship 0 kb of JS

🤔 What if we could take the best of both worlds?

🧩 The answer is a completely new React paradigm: React Server Components RSC

(
)
WHAT ARE REACT SERVER COMPONENTS?

REACT SERVER COMPONENTS RSC 1 CLIENT COMPONENTS UI = f(state)

👉 “Regular” components
👉 A new full-stack architecture for React apps
👉 Created with “use client” directive
👉 Introduces the server as an integral part of at the top of the module
React component trees: server components

👉 We write frontend code next to backend code 2 SERVER COMPONENTS UI = f(data)

in a natural way that “feels” like regular React
👉 Components that are only rendered on
☝ RSC is NOT active by default in new React apps the server
(e.g. Vite apps): it needs to be implemented by
👉 Don’t make it into the bundle 0 kb)
a framework like Next.js (“app router”)
👉 We can build the back-end with React!

👉 Default in apps that use the RSC

Name of the Name of the new architecture (like Next.js)
new PARADIGM COMPONENT TYPE
(
(
)
 AN EXAMPLE THE SERVER CLIENT BOUNDARY

Client component Also a sub-tree,

but a small one
App

Sidebar Header Main

Avatar DarkMode Table SortBy

“use client” “use client”

CabinRow
Server-client boundary

Menu “use client”

Split point
between server Duplicate Edit Delete
and client code

Server component Client sub-tree. Child modules

need no “use client” Simplified tree)
(
+
-
SERVER COMPONENTS VS. CLIENT COMPONENTS

CLIENT SERVER
“use client” Default
COMPONENTS COMPONENTS

⚡ State/hooks ✅ YES ❌ NO

🔼 Lifting state up ✅ YES ❌ N.A.

✅ YES Must be serializable when passed to

🔽 Props ✅ YES
client components. No functions or classes)

📥 Data fetching 🤷 Also possible, preferably with library ✅ Preferred. Use async/away in component

Only client components (can’t go back

📦 Can import
in the client-server boundary)
Client and server components

Client components and server

✍ Can render
components passed as props
Client and server components

🔄 When re-render? On state change On URL change (navigation)

(
 A SIMPLE NEW MENTAL MODEL

“TRADITIONAL” REACT REACT WITH RSC

FETCH DATA
Server Components
RE RENDER
🌐 SERVER PROPS

👩💻 CLIENT

FETCH DATA Client

Components
RE RENDER
Components
RE RENDER

DISPLAY DISPLAY

UPDATE UPDATE UPDATE

STATE View STATE View URL
Interaction Interaction Navigation
-
-
-
THE GOOD AND BAD OF THE RSC ARCHITECTURE

THE GOOD THE BAD

👍 We can compose entire full-stack apps with 👎 Makes React more complex
React components alone (+ server actions 👉)
👎 More things to learn and understand
👍 One single codebase for front and back-end
👎 Things like Context API don’t work in server
👍 Server components have more direct and secure components
access to the data source (no API, no exposing
API keys, etc.) 👎 More decisions to make: “Should this be a
client or a server component?”, “Should I fetch
👍 Eliminate client-server waterfalls by fetching all this data on the server or the client?”, etc.
the data needed for a page at once before
sending it to the client (not each component) 👎 Sometimes you still need to build an API (for
example if you also have a mobile app)
👍 “Disappearing code”: server components ship
no JS, so they can import huge libraries “for free” 👎 Can only be used within a framework
SECTION
OVERVIEW OF NEXT.JS WITH THE
"APP" ROUTER

LECTURE
HOW RSC WORKS BEHIND THE
SCENES
 A QUICK REVIEW OF RENDERING IN REACT

“TRADITIONAL” REACT
Components A B C

A
🤔 How does this work in RSC? 👉
Tree of component instances
B B C Component tree)

B A RENDER A

React element tree (“Virtual DOM”) B B C

COMMIT TO DOM B D

DOM Elements HTML

(
(
)
 HOW RSC WORKS BEHIND THE SCENES

Server The code from the SERVER CLIENT NOT server and client
component SC SC has disappeared in the typical sense…

render React React

S render
Element SEND TO Element
“use client” “use client” CLIENT
React React React React
C S C render C Element C Element Element Element
RENDER RENDER render
React React React
C S SCs C Element
CCs Element Element
render

render
COMPONENT TREE “VIRTUAL DOM” OF SC TREES OF CC COMPLETE “VIRTUAL DOM”
(RSC PAYLOAD
Client
component CC

“HOLE” WHERE THE CC WILL BE RENDERED

🔽 Serialized props passed from SC to CC

📄 URL to script with component code

Powered by the framework’s bundler

(
(
)
)
)
+
HOW RSC WORKS BEHIND THE SCENES

The code from the SERVER CLIENT NOT server and client
SC has disappeared in the typical sense…
Merge into existing tree

re-render React React

S Element SEND TO Element
“use client” “use client” CLIENT
React React React React
C S C C Element C Element Element Element
RENDER RENDER
React React React
C S SCs C Element
CCs Element Element

COMPONENT TREE “VIRTUAL DOM” OF SC TREES OF CC COMPLETE “VIRTUAL DOM”

(RSC PAYLOAD

🤔 Why RSC Payload? Why not render SCs as HTML?

“HOLE” WHERE THE CC WILL BE RENDERED
👉 Describes the UI as data, not as finished HTML
🔽 Serialized props passed from SC to CC
👉 When a SC is re-rendered: React is able to merge (“reconcile”) the
📄 URL to script with component code
current tree on the client with a new tree coming from the server
👉 As a result, UI state can be preserved when a SC re-renders,
Powered by the framework’s bundler instead of completely re-generating the page as HTML
)
+
 A SIMPLIFIED REVIEW

“TRADITIONAL” REACT REACT WITH RSC

Component tree
of SC and CC
RSC PAYLOAD
1 RENDER SC FOR EACH CC IN TREE
👉 “Hole” where CC will render
“Virtual DOM” of SC 👉 Serialized props from SC
Component trees of CC 👉 URL to script with code
SERVER

CLIENT SEND “RSC

PAYLOAD”
Component tree
TO CLIENT
☝ Steps don’t wait for one
another. Completed render
2 RENDER CC work is streamed to client
RENDER

“Virtual DOM” Complete “Virtual DOM”

UI = f(data, state)

COMMIT COMMIT

UI = f(data)(state)
DOM Elements DOM Elements
1 2
–
:
+
 SECTION
OVERVIEW OF NEXT.JS WITH THE
"APP" ROUTER

LECTURE
RSC VS. SSR HOW ARE THEY
RELATED?
:
 REVIEW SERVER SIDE RENDERING SSR

SERVER CLIENT
👋 We’ll be talking about
🌐 👩💻
dynamic SSR HTML
generated at runtime)

Component tree Hydrate

RENDER

Interactive
HTML
React App

👉 SSR “Just take this component tree, render it 👉 “Also send the React code to
as HTML, and send that HTML to the browser” make the HTML interactive”
:
(
:
-
(
)
 THE RELATIONSHIP BETWEEN RSC AND SSR

SERVER CLIENT
🌐 👩💻 RSC VS. SSR

Doesn’t need to be
👉 RSC is NOT the same as SSR they
an actual web Component tree
are separate technologies
server. Simply of SC and CC
🤔 What
“another computer” about RSC?
RENDER SC
Hydrate 👉 RSC does NOT replace SSR

“Virtual DOM” of SC 👉 They usually work together:

Component trees of CC frameworks can combine them
SEND “RSC
SERVER
PAYLOAD” 👉 Both client and server
Interactive
CLIENT RENDER CC components are initially rendered
React App
Complete “Virtual on the server when SSR is used
DOM”
Also works like this 👉 In the RSC model, “server” just
when coupled with means “the developer’s computer”
Doesn’t need RSC. ALL components
to be a browser HTML
DOM Elements
are pre-rendered on 👉 Result: RSC does NOT require a
the server
running web server! Components
could run only once at built time
👉 SSR “Just take this component tree, render it 👉 “Also send the React code to
as HTML, and send that HTML to the browser” make the HTML interactive” (static site generation)
:
+
:
 THE RELATIONSHIP BETWEEN RSC AND SSR

SERVER CLIENT
🌐 👩💻 RSC VS. SSR
Only client
components 👉 RSC is NOT the same as SSR they
are separate technologies
Component tree Hydrate 👉 RSC does NOT replace SSR
Hydrate
SC and CC D CCs
LOA
PAY 👉 They usually work together:
RSC
RENDER frameworks can combine them

👉 Both client and server

Interactive
HTML components are initially rendered
React App
on the server when SSR is used

👉 In the RSC model, “server” just

So that React has the entire
component tree on the client, not
👋 SSR happens only on initial render. means “the developer’s computer”
just HTML. Necessary to preserve On re-renders, client components
UI state on future SC re-renders only render on the actual client 👉 Result: RSC does NOT require a
running web server! Components
could run only once at built time
👉 SSR “Just take this component tree, render it 👉 “Also send the React code to
as HTML, and send that HTML to the browser” make the HTML interactive” (static site generation)
(
:
)
:
STARTING TO BUILD
THE "WILD OASIS"
WEBSITE
 SECTION
STARTING TO BUILD THE "WILD
OASIS" WEBSITE

LECTURE
PROJECT PLANNING "THE WILD
OASIS" CUSTOMER WEBSITE
:
THE PROJECT THE WILD OASIS WEBSITE

👉 Remember: “The Wild Oasis” is a small boutique

hotel with 8 luxurious wooden cabins

✅ We built their application to manage everything

about the hotel: bookings, cabins and guests

✅ We also build the API using Supabase

✅ API 👉 Now they need a customer-facing website

NOW where guests can learn about the hotel, browse
all cabins, reserve a cabin, and create and
✅ update their profile

CUSTOMER FACING 👉 Updating data in the internal app should update

INTERNAL HOTEL
WEBSITE TO BOOK the website, so we use the same DB and API
MANAGEMENT APP
STAYS
👉 We are hired again 😎 🎉
-
:
👨💼 PROJECT REQUIREMENTS FROM THE BUSINESS

👉 Users of the app are potential guests and actual guests

👉 Guests should be able to learn all about the Wild Oasis Hotel ABOUT

👉 Guests should be able to get information about each cabin and see booked dates
CABINS
👉 Guests should be able to filter cabins by their maximum guest capacity

👉 Guests should be able to reserve a cabin for a certain date range

👉 Reservations are not paid online. Payments will be made at the property upon arrival. Therefore,
new reservations should be set to “unconfirmed” (booked but not yet checked in) RESERVATIONS

👉 Guests should be able to view all their past and future reservations

👉 Guests should be able to update or delete a reservation

👉 Guests need to sign up and log in before they can reserve a cabin and perform any operation
AUTHENTICATION
👉 On sign up, each guest should get a profile in the DB

👉 Guests should be able to set and update basic data about their profile to make check-in at the
PROFILE
hotel faster
FEATURES PAGES

FEATURE CATEGORIES NECESSARY PAGES

1⃣ About 1⃣ Homepage /

2⃣ Cabins 2⃣ About page /about

3⃣ Reservations 3⃣ Cabin overview /cabins/

4⃣ Authentication 4⃣ Cabin detail /cabins/:cabinId

5⃣ Profile 5⃣ Login /login

6⃣ Reservation list /account/reservations

7⃣ Edit reservation /account/reservations/edit

8⃣ Update profile /account/profile

+
TECHNOLOGY DECISIONS

The most popular React meta-framework. Handles routing, SSR,

👉 Framework data fetching and even remote state management (in a way…),
therefore replacing many tools we had to include before

We might still need global UI state in a Next.js app. For that, we

👉 UI State
Context API can use the Context API, Redux, or any of the other solutions. In
management this case the Context API will be enough.

We’ll use the data and API we already built in the first “Wild Oasis”
👉 DB / API project. If you skipped that project, please go back to the
“Supabase” section to set everything up

Modern way of writing CSS. Extremely easy to integrate into

👉 Styling Next.js. Most styles and markup will be pre-written anyway in
this project.
DATA FETCHING,
CACHING, AND
RENDERING
SECTION
DATA FETCHING, CACHING, AND
RENDERING

LECTURE
WHAT IS REACT SUSPENSE?
WHAT IS REACT SUSPENSE?

SUSPENSE Built-in React

component

App
👉 Built-in React component that we can use to
catch/isolate components (or entire subtrees)
that are not ready to be rendered (“suspending”)
Nav Suspense
👉 What causes a component to be suspending?

1 Fetching data (with a supported library) Products Filter

2 Loading code (with React’s lazy loading)

List
👉 Native way to support asynchronous operations
in a declarative way (no more isLoading states
Component in Next.js
and render logic 🎉) that will fetch data
(will be suspending)
HOW DOES SUSPENSE WORK?

COMPONENT
While rendering, suspending component is found
TREE
App

Go to closest Suspense parent (“boundary”) and

discard already rendered children
Nav Suspense

Display fallback component/JSX

Products Filter
AFTER ASYNC WORK IS DONE

Render subtree under Suspense boundary List

These haven’t
been rendered yet

☝ Important: Components do NOT automatically suspend just because an async operation is happening inside
them. Integrating async operations with Suspense is hard, so we use libraries React Query, Next.js, etc.)

(
 A LOOK BEHIND THE SCENES

FIBER TREE
Reconciliation App REPRESENTATION
Diffing Another built-in
Child component
Sibling
Nav Suspense Activity = ‘Visible’
‘Hidden’

Triggers Suspense Activity Spinner

by throwing promise
throw new Promise(...)
Fallback
Products Filter
🤔 How does Suspense actually know
that a component is suspending?
List State is preserved in
subsequent suspending

☝ Fallback will NOT be shown again if the Suspense trigger is wrapped in a transition (startTransition). In
Next.js, that’s the case with page navigations. We can reset the Suspense boundary with a unique key prop
+
 SECTION
DATA FETCHING, CACHING, AND
RENDERING

LECTURE
DIFFERENT TYPES OF SSR STATIC
VS. DYNAMIC RENDERING
:
SERVER SIDE RENDERING IN NEXT.JS

Routes of the same app

👉 Next.js is a React framework, so rendering is done

by React, following the rules we learned earlier
/ /search /product
👉 Remember: Both Server and Client components
are rendered on the server on the initial render

👉 In Next.js, the server-side rendering work is split

by routes

👉 Each route can be either static (also called pre-

rendered) or dynamic

👉 There is also Partial Pre-Rendering PPR which

mixes dynamic and static rendering in the same
Static Dynamic Static
route (more later 👉)
-
(
)
 STATIC VS. DYNAMIC RENDERING

STATIC RENDERING DYNAMIC RENDERING

👉 HTML is generated at built time, or 👉 HTML is generated at request time (for each
periodically in the background by re-fetching new request reaches the server)
data ISR, more on this later 👉)
👉 Makes sense if:
👉 Useful when data doesn’t change often and is 1⃣ The data changes frequently and is
not personalized to user (e.g. product page) personalized to the user (e.g. cart)
👉 Default rendering strategy in Next.js (even 2⃣ Rendering a route requires information that
when a page or component fetches data) depends on request (e.g. search params)
Content Delivery
Network
👉 When deployed to Vercel, each static 👉 A route automatically switches to dynamic
route is automatically hosted on a CDN rendering in certain conditions (next slide 👉)

👉 If all routes of an app are static, the entire app 👉 When deployed to Vercel, each dynamic route
can be exported as a static site SSG becomes a serverless function
(
(
)
WHEN NEXT.JS SWITCHES TO DYNAMIC RENDERING

👉 Usually, developers don’t directly choose whether a route should be static or dynamic. Next.js
will automatically switch to dynamic rendering in the following scenarios:

1 The route has a dynamic segment (page uses params)

2 searchParams are used in the page component /product?quantity=23

3 headers() or cookies() are used in any of the route’s server components

4 An uncached data request is made in any of the route’s server components

👉 This is necessary because any of these values can not be known by Next.js at built time

👉 We can also force Next.js to render a route dynamically: These influence caching 34 .
More on this later 👉
👉 export const dynamic = ‘force-dynamic’; from page.js
👉 export const revalidate = 0; from page.js
👉 { cache: 'no-store' } added to a fetch request in any of the route’s server components
👉 noStore() in any of the route’s server components
(
)
SOME TERMINOLOGY YOU MIGHT NEED

👉 Content Delivery Network CDN A network of servers located around the globe that cache and deliver a
website’s static content HTML, CSS, JS, images) from as close as possible to each user.

👉 Serverless computing: With the serverless computing model, we can run application code, usually back-
end code, without managing the server ourselves. Instead, we can just run single functions on a cloud
provider: serverless functions. The server is initialized and active only for the duration the serverless
function is running, unlike a traditional Node.js app where the server is constantly running. Remember:
each dynamic route becomes a serverless function.

👉 The “edge”: “As close as possible to the user”. A CDN is part of an “edge” network, but there is also
serverless “edge” computing. This is serverless computing that does not happen on a central server, but
on a network that’s distributed around the globe, as close as possible to the user (like a CDN but for
running code). Important: we can select certain routes to run on the edge when deployed to Vercel.

👉 Incremental Static Regeneration ISR A Next.js feature that allows developers to update the content of a
static page, in the background, even after the website has already been built and deployed. This happens
by re-fetching the data of a component or entire route after a certain interval. More on this later 👉
(
(
)
:
(
)
:
 SECTION
DATA FETCHING, CACHING, AND
RENDERING

LECTURE
PARTIAL PRE RENDERING
-
PARTIAL PRE RENDERING PPR A WHOLE NEW WAY OF RENDERING

👉 Idea/problem: Most pages don’t need to be Dynamic content Static shell

100% static or 100% dynamic

👉 Solution: Partial Pre-Rendering / /search /product

👉 New rendering strategy that combines static

and dynamic rendering in the same route

1 A static (pre-rendered) shell is served

immediately from a CDN, leaving holes for
dynamic content

2 The slower dynamic content is streamed in

as it’s rendered on the server

100% Static PPR 100% Dynamic

👉 Result: Even faster pages that can mostly be
delivered from the edge CDN even when “Pre- 80% static
there are small dynamic parts. rendered” 20% dynamic
-
(
)
(
)
:
HOW TO USE PARTIAL PRE RENDERING

👋 As of Next.js 14, PPR is highly experimental and should not be used in production

👉 PPR needs to be turned on in config file

👉 By default, as much as possible of any route will be statically rendered, creating a static shell

👉 Dynamic parts (components) should be placed inside Suspense boundaries

👉 There are no new APIs to learn 🎉

👉 These boundaries tell Next.js that anything within the boundary is dynamic

👉 The boundary prevents the dynamic part (e.g. reading a header or making a non-cached fetch
request) from spreading onto the entire route.

👉 We provide a static fallback to be shown while the dynamic part is rendering

👉 Dynamic components or sub-trees are inserted into the static shell as they become available
-
SECTION
DATA FETCHING, CACHING, AND
RENDERING

LECTURE
HOW NEXT.JS CACHES DATA
CACHING IN NEXT.JS

NEXT.JS CACHING

👉 Caching: Storing fetched or computed data in a temporary location for future access,
instead of having to re-fetch or re-compute the data every time it’s needed

👉 Next.js caches very aggressively: everything that is possible to cache, is cached

👉 Next.js provides APIs for cache revalidation: removing data from the cache and
updating it with fresh data (re-fetched or re-computed)

👍 Makes Next.js apps more performant and saves costs (computing and data access)

👎 Caching always ON by default: strange and unexpected behavior in some situations.

Some caches can’t be turned off 🤯

👎 Very confusing: Many different Next.js APIs affect and control caching
 THE CACHING MECHANISMS

REQUEST FULL ROUTE ROUTER

⚡ MEMOIZATION 🗄 DATA CACHE 📄 CACHE 👩💻 CACHE

🗺 Where? Server Server Server Client

Data fetched with

Data fetched in a Pre-fetched and
similar GET requests Entire static pages
💾 What data?
(same url and options
route or a single
HTML and RSC payload)
visited pages:
fetch request static and dynamic
in fetch function)

One page Indefinitely, even Until the “Data cache” 30 sec dynamic / 5 min
⏱ How long? request (one across de-deploys (can is invalidated (or app static (throughout one
render, one user) revalidate or opt out) is re-deployed) user session)

No need to fetch at the top

Data for static SPA-like navigation
of tree: the same fetch in
🧩 Enables
multiple components only
pages ISR when Static pages (instant navigation
revalidated and no full reloads)
makes one request

Only in components (not route

handlers or server actions) 👋 This is the behavior in production mode. Caching doesn’t work in development
(
+
THE CACHING MECHANISMS

REQUEST FULL ROUTE ROUTER

⚡ MEMOIZATION 🗄 DATA CACHE 📄 CACHE 👩💻 CACHE

🔄 How to revalidate? N.A. 👉 Time-based (automatic) for all data on page: 👉 revalidatePath or
export const revalidate = <time>; (page.js) revalidateTag in SA
👉 Time-based (automatic) for one data request: 👉 router.refresh
Revalidating Data Cache also
fetch('…', { next: { revalidate: <time>} })
revalidates Full Route Cache 👉 cookies.set or
👉 On-demand (manual): cookies.delete in SA
revalidatePath or revalidateTag

🙅 How to opt out? AbortController 👉 Entire page: Not possible

export const revalidate = 0; (page.js)
👉 Entire page:
These forces page to become export const dynamic = ‘force-dynamic’; (page.js)
dynamic, which also opts out 👉 Individual request: Can be very
of the Full Route Cache fetch('…', { cache: 'no-store' }) problematic
👉 Individual server component: noStore()
CLIENT AND SERVER
INTERACTIONS
SECTION
CLIENT AND SERVER
INTERACTIONS

LECTURE
BLURRING THE BOUNDARY
BETWEEN SERVER AND CLIENT
 THE SERVER CLIENT BOUNDARY FRONT END VS. BACK END

TRADITIONAL NEXT.JS WITH RSC SA

BACK END API Client BACK END DATA RENDER DIRECTLY

🌐 component

FRONT END BACK END

MUTATIONS JSON DATA Server
POST, PUT …] GET component
BACK END BACK END FRONT END

FRONT END MUTATIONS

DATA SEND AS PROPS
👩💻 SERVER ACTIONS SA FRONT END

👉 Very clear server-client boundary 👉 No clear separation between front-end and back-end anymore
👉 Communication happens via an API 👉 “Knitting”: pieces of server and client code interweave (composability)
👉 Once JSON arrives from the back-end, 👉 Allow us to build true full-stack applications in just one codebase
the front-end takes over 👉 No need for an intermediary API in many times
[
[
]
:
:
-
-
-
-
-
-
-
-
-
:
[
]
(
)
-
+
:
-
-
 IMPORTING VS. RENDERING
Where client-server boundaries are
DEPENDENCY TREE MODULE IMPORTS COMPONENT TREE

A SC A SC
imports renders

B CC D SC C SC B CC C SC
“use client”

“use client” E CC E CC D SC E CC E CC
Client-server boundary “use client”

C CC C CC

👉 Possible if server component is

🤔 Is C a server or 👉 It can be both! A component imported 🤔 A client component
passed as prop (children or other)
a client inside the client-server boundary rendering a server
component? creates a client component instance component? 👉 D has already been executed here…

CLIENT COMPONENTS SERVER COMPONENTS

📦 Can import Only client components (can’t go back in client-server boundary) Client and server components

✍ Can render Client components and server components passed as props Client and server components
(
(
(
(
(
(
(
(
(
(
(
(
(
(
(
)
)
)
)
)
)
)
)
)
)
)
)
)
)
)
(
)
 AUTHENTICATION
WITH NEXTAUTH
AUTH.JS
(
)
 SECTION
AUTHENTICATION WITH
NEXTAUTH AUTH.JS

LECTURE
WHAT IS MIDDLEWARE IN
NEXT.JS?
(
)
HOW MIDDLEWARE WORKS IN NEXT.JS

REQUEST MIDDLEWARE RESPONSE

HOW MIDDLEWARE WORKS IN NEXT.JS

REDIRECT OR REWRITE TO A ROUTE

1
REQUEST MIDDLEWARE APP ROUTES RESPONSE

2
SEND RESPONSE DIRECTLY USUALLY JSON

MIDDLEWARE DETAILS USE CASES

👉 By default, middleware runs before every route in a project, 👉 Read and set cookies and headers
but we can specify which paths using a matcher
👉 Authentication and authorization
👉 Analogy: chunk of code that’s in every page.js component 👉 Server-side analytics

👉 Only one middleware function: needs to be exported from 👉 Redirect based on geolocation
middleware.js (or .ts) in the project root folder
👉 A/B testing
👉 Middleware needs to produce a response: 1 or 2
:
:
(
)
 MUTATIONS WITH
SERVER ACTIONS
MODERN REACT
HOOKS

+
 SECTION
MUTATIONS WITH SERVER
ACTIONS MODERN REACT HOOKS

LECTURE
WHAT ARE SERVER ACTIONS?
+
WHAT ARE SERVER ACTIONS?
That is able to
SERVER ACTIONS handle user input

🎯 INTERACTIVE FULL STACK APPLICATIONS

👉 The missing piece in the RSC architecture that
enables interactive full-stack applications
RSC ARCHITECTURE
👉 Async functions that run exclusively on the
server, allowing us to perform data mutations
1 DATA FETCHING 2 MUTATIONS

SERVER SERVER
COMPONENTS ACTIONS

📦 ⚙
-
HOW TO CREATE SERVER ACTIONS
NOT for server components,
SERVER ACTIONS but for server actions
“use server” (“API endpoint”)

👉 The missing piece in the RSC architecture that

enables interactive full-stack applications SERVER CLIENT
🌐 👩💻
👉 Async functions that run exclusively on the
server, allowing us to perform data mutations
“use client” (“<script> tag”)
👉 Created with the “use server” directive at the
top of the function or an entire module
SERVER ACTIONS CAN BE DEFINED AT THE TOP OF
👉 Behind the scenes: Next.js creates API endpoint
(with URL for each server action. Whenever a
1 An async function in a server component.
Can be used in component or passed to a
server action is called, a POST request is made to
client component (unlike functions)
its URL (the function itself never reaches client)
2 Standalone file: exported functions become
👉 Unlike server components, server actions actually
We don’t have to manually create APIs server actions that can be imported into any
require a running web server component [recommended]
or route handlers to mutate data 🎉
)
:
HOW TO USE SERVER ACTIONS

SERVER ACTIONS SERVER ACTIONS CAN BE CALLED FROM

👉 The missing piece in the RSC architecture that 1 action attribute in a <form> element (in
enables interactive full-stack applications server and client components)

👉 Async functions that run exclusively on the 2 Event handlers (only client components)
server, allowing us to perform data mutations
3 useEffect (only client components)
👉 Created with the “use server” directive at the
top of the function or an entire module Code is running on the back-end, so
we need to assume inputs are unsafe
👉 Behind the scenes: Next.js creates API endpoint IN SERVER ACTIONS, WE CAN
(with URL for each server action. Whenever a
server action is called, a POST request is made to 👉 Perform data mutations (create, update, delete)
its URL (the function itself never reaches client) 👉 Update the UI with new data: Revalidate cache
with revalidatePath and revalidateTag
👉 Unlike server components, server actions actually
👉 Work with cookies
require a running web server
👉 Many more…
)
:
: