Matheus Albuquerque
October 01, 2022
210

# 🇪🇸 React Alicante 2022

ℹ️ Inside Fiber: the in-depth overview you wanted a TLDR for

We'll have an in-depth overview of the important concepts behind reconciliation and React Fiber. Then, we'll explore how React uses this algorithm and go through a few magic words we hear a lot, like coroutines, continuations, generators, and algebraic effects—and see how they all relate to React.

October 01, 2022

## Transcript

1. ¡Hola, React Alicante! ✋ 🇪🇸
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR • THE 28TH OF JUNE, 2022.

2. MATHEUS ALBUQUERQUE
INSIDE FIBER
THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

3. I’M MATHEUS 🙋
↝ @YTHECOMBINATOR ON THE
WEB

↝ SR. SOFTWARE ENGINEER
@MEDALLIA

↝ MENTOR @TECHLABS

4. Disclaimers
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

5. #1
REACT SOURCE
CODE IS
CONSTANTLY
CHANGING, AND
SOME THOUGHTS
ARE SPECULATIONS
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

6. #2
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR
🤯 = FURTHER
DISCUSSIONS
AFTER THE
SESSION

7. A bit of context
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

8. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

9. CONTINUATIONS
ALGEBRAIC EFFECTS
COROUTINES
FIBERS
GENERATORS

10. ALGEBRAIC EFFECTS
COROUTINES
FIBERS
GENERATORS
CONTINUATIONS

11. Fiber(s)
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

const result
=
x + y;

return result;

}

STACK FRAMES

13. let frame: Frame
=
{

return: frame,

parameters: [2, 2],

localVariables: {

result: 4,

},

}
STACK FRAMES

14. let frame: Frame
=
{

return: frame,

parameters: [2, 2],

localVariables: {

result: 4,

},

}
let fiber: Fiber
=
{

return: fiber,

component: Avatar,

props: { id: 4 },

state: {

},

}
STACK FRAMES

15. ↝ FIBER ARCHITECTURE ⇢ REACT-SPECIFIC
IMPLEMENTATION OF A CALL-STACK-LIKE MODEL
WHERE REACT HAS FULL CONTROL OF SCHEDULING
WHAT SHOULD BE DONE

↝ FIBER ⇢ A STACK FRAME FOR A REACT
COMPONENT
FIBERS

16. Fibers as

Units of Work
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

17. ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP
WITH A BUNCH OF REACT ELEMENTS.
DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT
RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE
OF FIBER NODES.
DEPENDING ON THE TYPE OF A REACT ELEMENT THE FRAMEWORK
NEEDS TO PERFORM DIFFERENT ACTIVITIES.
EACH ELEMENT IS CONVERTED INTO A FIBER NODE THAT
DESCRIBES THE WORK THAT NEEDS TO BE DONE.

18. ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP
WITH A BUNCH OF REACT ELEMENTS.
DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT
RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE
OF FIBER NODES.
DEPENDING ON THE TYPE OF A REACT ELEMENT THE FRAMEWORK
NEEDS TO PERFORM DIFFERENT ACTIVITIES.
EACH ELEMENT IS CONVERTED INTO A FIBER NODE THAT
DESCRIBES THE WORK THAT NEEDS TO BE DONE.

19. ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP
WITH A BUNCH OF REACT ELEMENTS.
DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT
RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE
OF FIBER NODES.
DEPENDING ON THE TYPE OF A REACT ELEMENT THE FRAMEWORK
NEEDS TO PERFORM DIFFERENT ACTIVITIES.
EACH ELEMENT IS CONVERTED INTO A FIBER NODE THAT
DESCRIBES THE WORK THAT NEEDS TO BE DONE.

20. ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP
WITH A BUNCH OF REACT ELEMENTS.
DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT
RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE
OF FIBER NODES.
DEPENDING ON THE TYPE OF A REACT ELEMENT THE FRAMEWORK
NEEDS TO PERFORM DIFFERENT ACTIVITIES.
EACH ELEMENT IS CONVERTED INTO A FIBER NODE THAT
DESCRIBES THE WORK THAT NEEDS TO BE DONE.

21. ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP
WITH A BUNCH OF REACT ELEMENTS.
DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT
RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE
OF FIBER NODES.
DEPENDING ON THE TYPE OF A REACT ELEMENT THE FRAMEWORK
NEEDS TO PERFORM DIFFERENT ACTIVITIES.
EACH ELEMENT IS CONVERTED INTO A FIBER NODE THAT
DESCRIBES THE WORK THAT NEEDS TO BE DONE. A UNIT OF WORK.

22. ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP
WITH A BUNCH OF REACT ELEMENTS.
DURING RECONCILIATION, DATA FROM EVERY REACT ELEMENT
RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE
OF FIBER NODES.
DEPENDING ON THE TYPE OF A REACT ELEMENT THE FRAMEWORK
NEEDS TO PERFORM DIFFERENT ACTIVITIES.
EACH ELEMENT IS CONVERTED INTO A FIBER NODE THAT
DESCRIBES THE WORK THAT NEEDS TO BE DONE. A UNIT OF WORK.
AND THAT MAKES
IT A CONVENIENT
WAY TO TRACK,
SCHEDULE, PAUSE
AND ABORT THE
WORK.

23. Visualizing

Units of Work
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

24. #EXPERIMENT 💻

#1 Inspecting Elements

25. let fiberNode
=
fiberRoot.current;

let fibersMap
=
new Map();

while (fiberNode) {

if (fiberNode.stateNode
!
=
=
null) {

fibersMap.set(fiberNode.stateNode, fiberNode);

}

if (fiberNode.child === null) {

while (fiberNode
!
=
=
null
&
&
fiberNode.sibling === null) {

fiberNode
=
fiberNode.return;

}

fiberNode
=
fiberNode?.sibling;

continue;

}

fiberNode
=
fiberNode.child;

}

26. let fiberNode
=
fiberRoot.current;

let fibersMap
=
new Map();

while (fiberNode) {

if (fiberNode.stateNode
!
=
=
null) {

fibersMap.set(fiberNode.stateNode, fiberNode);

}

if (fiberNode.child === null) {

while (fiberNode
!
=
=
null
&
&
fiberNode.sibling === null) {

fiberNode
=
fiberNode.return;

}

fiberNode
=
fiberNode?.sibling;

continue;

}

fiberNode
=
fiberNode.child;

}
🤯

27. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

28. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

29. Manipulating
Units of Work
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

30. #QUESTION 🤔

homoiconicity?

31. (let [x 1]

(inc x)) ;
=
>
2
HOMOICONICITY

32. (let [x 1]

(inc x)) ;
=
>
2
HOMOICONICITY
PERFORMS A TEMPORARY BINDING

(BINDS X TO THE VALUE 1)

33. INCREMENTS X TO GIVE
THE RETURN VALUE OF 2
(let [x 1]

(inc x)) ;
=
>
2
HOMOICONICITY

34. IT CAN BE THOUGHT OF AS A LIST WITH THREE
ELEMENTS

↝ A SYMBOL NAMED LET

↝ A VECTOR WITH TWO ELEMENTS

↝ A LIST WITH TWO ELEMENTS
HOMOICONICITY

35. IT CAN BE THOUGHT OF AS A LIST WITH THREE
ELEMENTS

↝ A SYMBOL NAMED LET

↝ A VECTOR WITH TWO ELEMENTS

↝ A LIST WITH TWO ELEMENTS
HOMOICONICITY
A SYMBOL (X) AND AN INTEGER
A SYMBOL (INC) AND A SYMBOL (X)

36. 🤯
#QUOTE 🤔

“…Homoiconicity is a property of
some programming languages in
which the code used to express a
program is written using the data
structures of that language.”

37. ↝ REACT ELEMENTS ARE JUST DATA

↝ JUST LIKE IN LISP, REACT COMPONENTS CAN
MANIPULATE THEIR CHILDREN AND RETURN
COMPLETELY DIFFERENT THINGS
HOMOICONICITY

38. #EXPERIMENT 💻

#2 Pattern Matching in React

39. PATTERN MATCHING

40. /
/ .
.
.

export function isWhen(

>
{

return child.element.type === When;

}

/
/ .
.
.

children: ReactNode

) {

return Children.toArray(children).map((element, idx)
=
>
({

element: element,

position: idx,

})) as Array>
>
;

}

/
/ .
.
.

41. const supportsSensor
=
()
=
>
Boolean(window.AmbientLightSensor);

const AmbientLight
=
React.lazy(()
=
>
import("./AmbientLight"));

const Fallback
=
React.lazy(()
=
>
import("./Fallback"));

export default function MyComponent() {

const { Match, When, Otherwise }
=
usePatternMatch();

return (

);

}
PATTERN MATCHING

42. const supportsSensor
=
()
=
>
Boolean(window.AmbientLightSensor);

const AmbientLight
=
React.lazy(()
=
>
import("./AmbientLight"));

const Fallback
=
React.lazy(()
=
>
import("./Fallback"));

export default function MyComponent() {

const { Match, When, Otherwise }
=
usePatternMatch();

return (

);

}
PATTERN MATCHING

+ REACT.SUSPENSE

+ REACT.LAZY()

THE COMPONENT BUNDLE
THAT MATCHES

43. const supportsSensor

+ REACT.SUSPENSE

+ REACT.LAZY()

THE COMPONENT BUNDLE
THAT MATCHES
MANIPULATING BASED ON
ELEMENTS DATA.

44. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

45. Fibers out
there
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

46. ↝ A FIBER IS A GENERIC MODEL OF EXECUTION
WHERE EACH UNIT WORKS TOGETHER
COOPERATIVELY

↝ FIBERS ARE A COMMON RESOURCE IN SOME
OPERATING SYSTEMS (E.G. WINDOWS) AND IN
SOME PROGRAMMING LANGUAGES (E.G. OCAML)
FIBERS OUT THERE

47. Coroutines
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

48. #1 A GENERATOR (PRODUCER)
THAT CAN ALSO CONSUME
VALUES.
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

49. #1
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR
↝ JAVASCRIPT GENERATORS
CAN CONSUME VALUES

↝ BY THIS DEFINITION,
THEY ARE COROUTINES
A GENERATOR (PRODUCER)
THAT CAN ALSO CONSUME
VALUES.

50. #2 A GENERATOR THAT CAN
RESOLVE ASYNCHRONOUS
VALUES, LIKE ASYNC/AWAIT.
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

51. #2
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR
↝ THIS IS THE MOST COMMON
MEANING OF “COROUTINE”
IN THE JAVASCRIPT WORLD

↝ WE HAD CO AND BLUEBIRD,
IMPLEMENTATIONS BASED
ON GENERATORS
VALUES, LIKE ASYNC/AWAIT.

52. #3 A GENERATOR THAT CAN
YIELD WITH A STACKFUL
CONTINUATION
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

53. #3
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR
↝ "DEEP AWAIT"

↝ e.g. WITH SUSPENSE, WE
CAN PAUSE
RECONCILIATION AT ANY
DEPTH
A GENERATOR THAT CAN
YIELD WITH A STACKFUL
CONTINUATION

54. Fibers
CONTROL IS PASSED TO A
SCHEDULER WHICH DETERMINES
WHAT TO RUN NEXT
↝ = CONTROLLED AT THE LEVEL OF THE
OPERATING SYSTEM OR FRAMEWORK

↝ E.G. NODE.JS EVENT LOOP

55. Coroutines
CONTROL IS PASSED TO THE
CALLER AND HANDLED BY
APPLICATION CODE
Fibers
CONTROL IS PASSED TO A
SCHEDULER WHICH DETERMINES
WHAT TO RUN NEXT

56. Coroutines &
React
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

57. COROUTINES APPEARED WHEN WORK ON FIBER
WAS FIRST GOING AS A SPECIFIC COMPONENT
TYPE.
THE IDEA BEHIND COROUTINES — AS
OPPOSED TO FIBERS — WAS TO GIVE
COMPONENTS EXPLICIT CONTROL
OVER YIELDING AND RESUMPTION.

58. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

59. COROUTINES & REACT
↝ COROUTINES PER SI IN REACT NO LONGER EXIST.

↝ IT WILL BE FASCINATING TO SEE WHAT FORM
FIBER.

60. Coroutines &
Concurrent
React
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

61. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

62. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

63. function resourcefulOperation(value: number) {

let newValue
=
String(value);

for (let i
=
0; i < 1000000; i++) {

newValue
=
`\${value} + \${i}
=
\${value + i}`;

}

return newValue;

}

function ResourcefulComponent(props: { value: number }) {

const { value }
=
props;

const result
=
resourcefulOperation(value);

return {result};

}

64. #EXPERIMENT 💻

#3 Building a coroutines-based
scheduler

65. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

66. function resourcefulOperation(value: number) {

let newValue
=
String(value);

for (let i
=
0; i < 1000000; i++) {

newValue
=
`\${value} + \${i}
=
\${value + i}`;

}

return newValue;

}

function ResourcefulComponent(props: { value: number }) {

const { value }
=
props;

const result
=
resourcefulOperation(value);

return {result};

}

67. function* resourcefulOperation(value: number) {

let newValue
=
String(value);

while (true) {

yield;

for (let i
=
0; i < 1000000; i++) {

newValue
=
`\${value} + \${i}
=
\${value + i}`;

}

return newValue;

}

}

const initialValue
=
0;

const scheduler
=
new Scheduler(resourcefulOperation, initialValue);

function ResourcefulComponent(props: { value: number }) {

const { value }
=
props;

const result
=
scheduler.performUnitOfWork(value);

return {result};

}

68. function* resourcefulOperation(value: number) {

let newValue
=
String(value);

while (true) {

yield;

for (let i
=
0; i < 1000000; i++) {

newValue
=
`\${value} + \${i}
=
\${value + i}`;

}

return newValue;

}

}

const initialValue
=
0;

const scheduler
=
new Scheduler(resourcefulOperation, initialValue);

function ResourcefulComponent(props: { value: number }) {

const { value }
=
props;

const result
=
scheduler.performUnitOfWork(value);

return {result};

}
PROMOTED TO A GENERATOR
YIELDING EXECUTION

69. DEEP DIVING ON CONCURRENT REACT

70. enum SchedulerState {

IDLE
=
"IDLE",

PENDING
=
"PENDING",

DONE
=
"DONE",

}

class Scheduler {

state: SchedulerState;

result: T;

worker: (data: T)
=
>
Generator;

iterator: Generator;

constructor(worker: (data: T)
=
>
Generator, initialResult: T) {

this.state
=
SchedulerState.IDLE;

this.worker
=
worker;

this.result
=
initialResult;

}

performUnitOfWork(data: T) {

switch (this.state) {

case "IDLE":

this.state
=
SchedulerState.PENDING;

this.iterator
=
this.worker(data);

throw Promise.resolve();

case "PENDING":

const { value, done }
=
this.iterator.next();

if (done) {

this.result
=
value;

this.state
=
SchedulerState.DONE;

return value;

}

throw Promise.resolve();

case "DONE":

this.state
=
SchedulerState.IDLE;

return this.result;

}

}

}

71. performUnitOfWork(data: T) {

switch (this.state) {

case "IDLE":

this.state
=
SchedulerState.PENDING;

this.iterator
=
this.worker(data);

throw Promise.resolve();

case "PENDING":

const { value, done }
=
this.iterator.next();

if (done) {

this.result
=
value;

this.state
=
SchedulerState.DONE;

return value;

}

throw Promise.resolve();

case "DONE":

this.state
=
SchedulerState.IDLE;

return this.result;

}

}

72. DID WE JUST

useTransition’ED? 🤔

73. function resourcefulOperation(value: number) {

let newValue
=
String(value);

for (let i
=
0; i < 1000000; i++) {

newValue
=
`\${value} + \${i}
=
\${value + i}`;

}

return newValue;

}

function ResourcefulComponent(props: { value: number }) {

const { value }
=
props;

const result
=
resourcefulOperation(value);

return {result};

}

74. function resourcefulOperation(value: number) {

let newValue
=
String(value);

for (let i
=
0; i < 1000000; i++) {

newValue
=
`\${value} + \${i}
=
\${value + i}`;

}

return newValue;

}

function ResourcefulComponent(props: { value: number }) {

const [_, startTransition]
=
useTransition();

const [result, setResult]
=
useState("");

useEffect(()
=
>
{

startTransition(()
=
>
{

const newResult
=
resourcefulOperation(props.value);

setResult(newResult);

});

}, [props.value]);

return {result};

}

75. YES, WE DID 🤓
WITH OUR OWN, COROUTINES-BASED, SCHEDULER

76. ↝ A COOPERATIVE MULTITASKING MODEL

↝ A SINGLE INTERRUPTIBLE RENDERING THREAD

↝ RENDERING CAN BE INTERLEAVED WITH OTHER

↝ AN UPDATE CAN HAPPEN IN THE BACKGROUND
WITHOUT BLOCKING THE RESPONSE TO NEW INPUT
COROUTINES & SCHEDULING

77. ↝ ↓ ORIGINAL RENDER TASK
USER INPUT →

78. ↝ IT YIELDS EXECUTION IS BACK TO THE MAIN

↝ IT'S SMALLER THAN A SINGLE FRAME EVEN ON
120FPS, SO IT WON'T BLOCK ANIMATIONS

↝ IN PRACTICE, RENDERING IS INTERRUPTIBLE
COROUTINES & SCHEDULING

79. Coroutines out
there
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

80. ↝ ASYNCHRONY IN JAVASCRIPT IS CONTAGIOUS

↝ IF ANY FUNCTION IS ASYNC, THEN EVERYTHING
THAT CALLS IT MUST ALSO BE ASYNC…

↝ …AND SO ON UNTIL THE ENTIRE PROGRAM
IS ASYNCHRONOUS 🤷
ASYNCHRONY & JS

81. ↝ ASYNCHRONY IN JAVASCRIPT ISN’T FREE

↝ EVERY ASYNCHRONOUS FUNCTION CALL HAS TO:

↝ ALLOCATE CALLBACKS & STORE THEM SOMEWHERE

↝ TAKE A TRIP BACK TO THE EVENT LOOP BEFORE
INVOKING THOSE CALLBACKS
ASYNCHRONY & JS

82. ↝ ITS API HAS TWO MAIN FUNCTIONS FOR
COMPILING SASS FILES: ONE SYNC AND ONE
ASYNC

↝ THE ASYNC ONE BECAME WIDELY USED IN
PRACTICE BECAUSE IT ENABLED ASYNC PLUGINS
ASYNCHRONY & SASS

83. ↝ FOR NODE SASS, THE PERFORMANCE DIFFERENCE
WAS NEGLIGIBLE, BECAUSE IT WAS BUILT ON C++

↝ HOWEVER, DART SASS RUNS AS PURE JAVASCRIPT,
WHICH MAKES IT SUBJECT TO JAVASCRIPT’S
ASYNC RULES
ASYNCHRONY & SASS

84. ↝ THE ASYNC VERSION IN DART SASS WAS 2-3X
SLOWER THAN THE SYNC ONE

↝ THEY STARTED USING NODE-FIBERS TO IMPLEMENT
THE ASYNC API USING THE FAST, SYNC, CODE
ASYNCHRONY & SASS

85. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

86. Continuations
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

87. CONTINUATIONS

88. CONTINUATIONS
↝ A CONTINUATION IS A CONTROL FLOW PRIMITIVE.

↝ IT’S AN ABSTRACTION THAT REPRESENTS THE
REMAINING STEPS IN A COMPUTATION.

89. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

=

if (

&
&

&
&

<
=
0

) {

return performWork;

}

}

}

scheduleWork(performWork);
CONTINUATIONS IN REACT

91. ↝ IT HANDLES A QUEUE OF TASKS IN A WHILE LOOP

↝ IF THERE ARE STILL TASKS ON THE QUEUE, IT
RETURNS performWork AND SCHEDULE IT FOR
RESUMPTION AT SOME LATER TIME

↝ IN THIS CONTEXT, IT REPRESENTS THE
CONTINUATION OF A QUEUE OF TASKS
CONTINUATIONS IN REACT

92. CONTINUATIONS ON THE WEB

93. CONTINUATIONS ON THE WEB
async function doWork() {

while (true) {

let hasMoreWork
=
doSomeWork();

if (!hasMoreWork) {

return;

}

if (!navigator.scheduling.isInputPending()) {

continue;

}

await scheduler.yield();

}

}
🤯

94. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

95. Effect Handlers
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

96. ↝ EFFECTS ASK THE CALLING ENVIRONMENT TO

↝ WHEN AN EFFECT IS USED, THE NEAREST EFFECT
HANDLER IS CALLED, WHICH ALLOWS YOU TO RUN
CODE IN RESPONSE TO THE EFFECT AND RETURN
SOME VALUE
EFFECT HANDLERS
🤯

97. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

98. function getName(user) {

let name
=
user.name;

if (name === null) {

name
=

}

return name;

}

const arya
=
{ name: null, friendNames: [] };

const gendry
=
{ name: 'Gendry', friendNames: [] };

try {

getName(arya);

}

handle (effect) {

resume with 'Arya Stark';

}

}

99. function getName(user) {

let name
=
user.name;

if (name === null) {

name
=

}

return name;

}

const arya
=
{ name: null, friendNames: [] };

const gendry
=
{ name: 'Gendry', friendNames: [] };

try {

getName(arya);

}

handle (effect) {

resume with 'Arya Stark';

}

}

100. function getName(user) {

let name
=
user.name;

if (name === null) {

name
=

}

return name;

}

const arya
=
{ name: null, friendNames: [] };

const gendry
=
{ name: 'Gendry', friendNames: [] };

try {

getName(arya);

}

handle (effect) {

resume with 'Arya Stark';

}

}
THROW → PERFORM
CATCH → HANDLE
LETS US JUMP BACK TO WHERE WE
PERFORMED THE EFFECT

101. Effect
handlers in
React
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

102. #1
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR
LAYOUT
ALGORITHM

103. THE REACT TEAM APPARENTLY
SPENT SOME TIME
EXPERIMENTING WITH EFFECT-
HANDLER CONTROL STRUCTURES
FOR MANAGING LAYOUT

104. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

105. #2
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR
CONTEXT API
DRAFTS

106. THEY’VE ALSO REMODELED THE CONTEXT
API USING ALGEBRAIC EFFECTS

107. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

108. #3
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR
SIDE EFFECTS
WITHIN A
COMPONENT

109. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

110. function ThemeBorderColorRequest() { }

function FancyBox(children) {

const color
=
raise new ThemeBorderColorRequest();

return {

borderWidth: '1px',

borderColor: color,

children: children

};

}

function BlueTheme(children) {

return try {

children();

} catch effect ThemeBorderColorRequest
-
>
[, continuation] {

continuation('blue');

}

}

function App(data) {

return BlueTheme(

FancyUserList.bind(null, data.users)

);

}

111. function ThemeBorderColorRequest() { }

function FancyBox(children) {

const color
=
raise new ThemeBorderColorRequest();

return {

borderWidth: '1px',

borderColor: color,

children: children

};

}

function BlueTheme(children) {

return try {

children();

} catch effect ThemeBorderColorRequest
-
>
[, continuation] {

continuation('blue');

}

}

function App(data) {

return BlueTheme(

FancyUserList.bind(null, data.users)

);

}
THROW → RAISE
CATCH → CATCH EFFECT

112. #4
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR
HOOKS API
DRAFTS

113. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

114. SEBASTIAN POINTS THAT
“CONCEPTUALLY, HOOKS ARE
ALGEBRAIC EFFECTS”.

115. #5
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR
SUSPENSE
INTERNALS

116. #QUESTION 🤔

Have you ever built any suspense-

117. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

118. A COMPONENT IS ABLE TO
SUSPEND THE FIBER IT IS
RUNNING IN BY THROWING A
PROMISE, WHICH IS CAUGHT
AND HANDLED BY THE
FRAMEWORK.

119. A COMPONENT IS ABLE TO
SUSPEND THE FIBER IT IS
RUNNING IN BY THROWING A
PROMISE, WHICH IS CAUGHT
AND HANDLED BY THE
FRAMEWORK.
THROW → HANDLE → RESUME

PATTERN.

120. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR
Closing Notes

121. #1 REACT FIBER WAS A REWRITE
OF REACT FOCUSED ON
GIVING MORE LOW-LEVEL
CONTROL OVER PROGRAM
EXECUTION
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

122. #1
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR
↝ FIBERS AS A LOW-LEVEL
COOPERATIVE WAY TO
MODEL EXECUTION

↝ ALGEBRAIC EFFECTS AS A
WAY TO HANDLE EFFECTS
WHERE THESE AND THEIR
BEHAVIOR ARE
INDEPENDENT
EXECUTION

123. #2
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR
THE LACK OF SOME
JAVASCRIPT FEATURES/
LANGUAGE-LEVEL RESOURCES
BY IMPLEMENTING SOME
ALTERNATIVE SOLUTIONS TO
ACHIEVE SIMILAR BEHAVIORS

E.G. EFFECT HANDLERS & CONTINUATIONS

124. #3
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR
UNDERSTANDING THESE
INTERNALS AND THEIR
RATIONALES HELPS US
IMPLEMENT OUR OWN
ABSTRACTIONS

E.G. THE COROUTINES-BASED SCHEDULER &
THE PATTERN MATCHING COMPONENTS

125. #4 THE FACT WE'RE DISCUSSING
ALL OF THESE TOPICS SHOWS
THAT REACT ACTS AS A
DEMOCRATIC AGENT FOR THIS
KIND OF KNOWLEDGE IN THE
FRONT-END WORLD
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

126. THIS IS THE EIGHT-YEARS-AGO-ME GIVING A
TALK ABOUT IONIC AT AN IOS DEVELOPERS
MEETUP TELLING THEM THAT ANGULAR WOULD
BE THE FUTURE.

127. #5
INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR
DON’T ALWAYS TRUST ALL OF
MY SPECULATIONS/FUTURE
PREDICTIONS 🤷

128. We’re hiring! 🗺

Mostly in…
🇺🇸🇲🇽🇦🇷🇺🇾🇪🇸🇨🇿🇮🇱🇮🇳

129. 🤝 🇪🇸 🤗

130. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

131. INSIDE FIBER: THE IN-DEPTH OVERVIEW YOU WANTED A TLDR FOR

132. MATHEUS ALBUQUERQUE
THAT’S ALL, FOLKS! THANKS!
QUESTIONS?