Simon Bloom TWG Overview It’s finally happened: your React project has grown from fledgling side-hobby into serious web application! Will your architecture hold up to your project’s new found scale, or will you let it become an incomprehensible jumble of tangled wires? Come learn simple, practical, and tangible patterns for making your current (and next) React application more composable, easier to reason about, and just overall more pleasurable to work with! Objective To introduce junior and intermediate developers to advanced react patterns that they can practically start using now. Target Audience Junior and intermediate React developers Assumed Audience Knowledge Intro-to-mid level experience with React Level Late Beginner / Intermediate Five Things Audience Members Will Learn The higher order component pattern The render props pattern React’s new context API The compound component pattern New React features: error boundaries and portals

1. THE
REACT
COOK
BOOK

2. SIMON BLOOM
work
TWG
teach
HackerYou
Canada Learning Code
Bridge School
@simonwbloom

3. COOKING
without following
a recipe

7. RECIPES
=

8. CODE
RECIPES =

9. DESIGN PATTERNS

10. “Solutions to
recurring problems”
DESIGN PATTERNS:

11. RECURRING
SOFTWARE
PROBLEM
DESIGN
PATTERN

12. DESIGN PATTERNS
are the recipes that
help us cook
delicious react apps

13. Let’s add some
recipes to your
react cookbook.

14. REACT
TOP
CHEFS

15. Our Cookbook
Context API
Presentation/Container
Components
Render Props

17. Cookbook
Recipe #1:
Context API
Chef Kent. C. Dodds

18. Passing props can
be annoying.

19. <App>
<Menu>
props

20. <Dashboard>
<Sidebar>
<Signout>

21. <Profile>
<Sidebar>
<Settings>
<ResetPassword>

22. PROP DRILLING

23. “USE REDUX”

25. Why is this so
hard?

26. Sometimes we
want our state to
be global, but React
doesn’t.

27. No way to directly
access parent state
from a deeply nested
component….

28. ...until
now!!!!

29. CONTEXT API:
“a way to pass data through the
component tree without having to pass
props down manually at every level.”

30. <Profile>
<Sidebar>
<Settings>
<ResetPassword>

31. <Profile>
<Sidebar>
<Settings>
<ResetPassword>

32. <Provider>
GLOBAL STATE CONTAINER

33. <Consumer>
HAS ACCESS TO THE PROVIDER

37. <App>
<Provider>
<Dashboard>
<Sidebar>
<Consumer>
this.state.user

39. <App>
<Provider>
<Dashboard>
<Sidebar>
<Consumer>
this.state.user
<Signout>
<Consumer>

40. <App> this.state.user
<Provider>
<Dashboard> <Sidebar>
<Nav>
<Consumer>
<My Profile>
<Main>
<Consumer>

42. When do I
use it?

43. - When you find yourself passing
props down deep into your tree
- You truly need ‘global state’ (auth,
user settings, translations, themes)
- Someone tells you you need redux

44. What can I
cook with it?

45. `

46. Recipe #2:
Presentation /
Container
components
Chef Dan Abramov

47. <WeatherWidget />

48. Request some weather data
from the API
Display that data on the page

49. Request Data
Display Data

51. Bloated
components!

52. Unfriendly to other devs
Difficult to reason about
Hard to modify / reuse

53. How do we avoid this?

55. separation of concerns.

56. Concern
Something your code is
responsible for.

57. Weather Widget
Fetching
Data
Displaying
Data

58. Fetching Data
Logic
Displaying Data
UI

59. Container Component for
logic
Presentation Component for
user interface

60. Container
Component
a.k.a “What it does”

61. <WeatherWidgetContainer>

63. Presentational
Component
a.k.a “What it looks like”

64. <WeatherWidget>

67. Why is this useful?

68. Readable
Easier to hunt down bugs
Re-usable
Testable

69. When do I
use it?

70. “Too many things!!”
Mixture of
behaviour/presentation
Bloated Component

71. Recipe #3:
Render Props
Chef Michael Jackson

72. Puppy
Voting
App
They’re good dogs Brent

73. <PuppyFeed>

74. 1. GET /api/puppies
2. Surface ‘loading’ spinner
3. Render adorable puppies
4. If error, render error

75. <KittenFeed>

76. 1. GET /api/kittens
2. Surface ‘loading’ spinner
3. Render adorable kittens
4. If error, render error

77. 1. GET /api/kittens
2. Surface ‘loading’ spinner
3. Render adorable kittens
4. If error, render error

78. <Petfeed>

80. <UserProfile>

81. 1. GET /api/profile
2. Surface ‘loading spinner’
3. Render user’s profile
4. If error, render error

82. 1. GET /api/profile
2. Surface ‘loading spinner’
3. Render user’s profile
4. If error, render error

85. Tight coupling of logic +
presentation made our
components less reusable
and flexible

86. RENDER PROPS:
“a simple technique for sharing code
between React components”

87. The “render” prop

89. What they have in common:
- Request data from API
- Need loading states
- Have error states

90. How they differ
- Render different things
- Render different spinners

91. Common logic, different
presentation

92. <Resource />
<Petfeed />

93. This is the key!!!

97. Same logic, different
presentation = huge win

98. Why render props are so
important:
- Self document incredibly well
- Separate presentation from logic
- Decrease code duplication
- Extendable
- Reusable
- Abstract away logic

99. When to use them
- Don’t start with a render prop. Start simple,
refactor later
- Share logic between components but not UI
- Other developers to re-use your code
- Defer rendering UI to a later date
- Dealing with common states/events in
different components

100. Final Thoughts

101. Your New Cookbook
Kent C Dodds’ homemade Context API…………..….….. 2
Presentation/Container Components a la Abramov….….3
Chef Jackson’s Render Props Souffle………………….……4

102. Battle
Tested
Shareable Fun
to Use
Familiar

103. Recipes are just the
starting point.
Go out and write your own
recipes, build your own
cookbooks!

104. Thank you!
@simonwbloom