State-management could make your application feel bloated, especially when handled on a large-scale. The React core team has been working hard to add features to take this trouble away. By using the new Context and Hooks feature I'll show how to handle state-management for large scale applications.

1. Handling Large-Scale
State-Management with
Context and Hooks
ReactConf Armenia
25/05/2019
@gethackteam

2. What is this about?
@gethackteam

3. @gethackteam

4. Who Am I?
@gethackteam

5. Roy Derks
@gethackteam

6. Let’s look at “state”
@gethackteam

7. State
<Menu />
<MenuItem />
@gethackteam

8. open = false open = true
State
@gethackteam

9. Pass state down?
UPDATE
FUNCTION
STATE
PROPS
State
@gethackteam

10. State
<MenuItem />
<Menu />
<SubMenu />
@gethackteam

11. State
open = false open = true
@gethackteam

12. State
open = false
openChild = [1]
open = true
@gethackteam

13. And what about
accessible components?
@gethackteam

14. State
open = false open = true
@gethackteam

15. State
open = false
openChild = [1]
open = true
@gethackteam

16. State
open = false
openChild = [1]
open = true
@gethackteam
selectedChild = 1

17. Would you still pass the
props down?
@gethackteam

18. State
<MenuItem />
<Menu />
<SubMenu />
<Menu />
<MenuItem />
@gethackteam

19. State
<DetailItem />
<App />
<Detail />
<App />
<Detail />
@gethackteam

20. State
@gethackteam

21. State
@gethackteam

22. State
@gethackteam

23. State
STATE
UPDATE
FUNTION
@gethackteam

24. State
STATE
UPDATE
FUNTION
MobX
@gethackteam

25. What about the Context
API?
@gethackteam

26. About the Context API
BEFORE React v16.3
@gethackteam

27. How does it work?
@gethackteam

28. How does it work?
CONTEXT
UPDATE
FUNTION
@gethackteam

29. How does it work?
@gethackteam

30. How does it work?
Create the Context “store”
@gethackteam

31. How does it work?
@gethackteam

32. How does it work?
Set the Context value
@gethackteam

33. How does it work?
@gethackteam

34. How does it work?
@gethackteam
Consume the values inside the Context

35. Looks familiar 🤔
@gethackteam

36. Looks familiar
@gethackteam

37. Looks familiar
@gethackteam

38. Looks familiar
@gethackteam

39. Looks familiar
@gethackteam

40. Cool! How can I
implement this?
@gethackteam

41. How to implement?
@gethackteam

42. How to implement?
@gethackteam

43. How to implement?
@gethackteam

44. How to implement?
@gethackteam

45. Update the Context
@gethackteam

46. Update the Context
@gethackteam

47. Update the Context
What is this value?
@gethackteam

48. Update the Context
@gethackteam

49. Update the Context
@gethackteam

50. Update the Context
@gethackteam

51. Update the Context
@gethackteam

52. Separating Providers
from Consumers
@gethackteam

53. Separating Providers
@gethackteam

54. Separating Providers
@gethackteam

55. Separating Providers
@gethackteam

56. Separating Providers
@gethackteam

57. Separating Providers
@gethackteam

58. Separating Providers
@gethackteam

59. And create your own
Hook to handle this
@gethackteam

60. Create Custom Hook
@gethackteam

61. Create Custom Hook
@gethackteam

62. Create Custom Hook
@gethackteam

63. When using Context
always useMemo()
@gethackteam

64. useMemo()
CONTEXT
UPDATE
FUNTION
@gethackteam

65. useMemo()
CONTEXT
UPDATE
FUNTION
@gethackteam

66. useMemo()
CONTEXT
UPDATE
FUNTION
@gethackteam

67. useMemo()
@gethackteam

68. useMemo()
@gethackteam

69. What if I have more
complex logic?
@gethackteam

70. useReducer()
@gethackteam

71. useReducer()
Initial state
@gethackteam

72. useReducer()
Current state Initial state
@gethackteam

73. useReducer()
Current state Initial state
Returns new state
@gethackteam

74. useReducer()
Current state Initial state
Function to update state Returns new state
@gethackteam

75. useReducer()
@gethackteam

76. useReducer()
@gethackteam

77. useReducer()
@gethackteam

78. useReducer()
@gethackteam

79. useReducer()
@gethackteam

80. useReducer()
@gethackteam

81. useReducer()
@gethackteam

82. useReducer()
@gethackteam

83. useReducer()
@gethackteam

84. useReducer()
@gethackteam

85. useReducer()
@gethackteam

86. useReducer()
@gethackteam

87. useReducer()
@gethackteam

88. Again, looks familiar
right? 🤔
@gethackteam

89. useReducer()
@gethackteam

90. useReducer()
@gethackteam

91. useReducer()
@gethackteam

92. Use it with Context
@gethackteam

93. Update the Context
@gethackteam

94. Update the Context
@gethackteam

95. Update the Context
@gethackteam

96. Update the Context
@gethackteam

97. What about debugging?
@gethackteam

98. Update the Context
@gethackteam

99. Update the Context
@gethackteam

100. Update the Context
@gethackteam

101. Update the Context
@gethackteam

102. What if i want a “global”
state?
@gethackteam

103. Nest Context Providers
@gethackteam

104. Nest Context Providers
@gethackteam

105. Nest Context Providers
@gethackteam

106. Nest Context Providers
@gethackteam

107. Nest Context Providers
@gethackteam

108. Nest Context Providers
@gethackteam

109. Nest Context Providers
@gethackteam

110. Nest Context Providers
@gethackteam

111. Nest Context Providers
@gethackteam

112. Dont forget to
useMemo()
@gethackteam

113. useMemo()
@gethac
CONTEXT
UPDATE
@gethackteam

114. useMemo()
@gethac
CONTEXT
UPDATE
@gethackteam

115. What about async API
requests?
@gethackteam

116. async/await
@gethackteam

117. async/await
@gethackteam

118. async/await
@gethackteam

119. async/await
@gethackteam

120. async/await
@gethackteam

121. To summarise…
@gethackteam

122. Context makes data
available in the
component tree
@gethackteam

123. Hooks let you easily
access this Context
@gethackteam

124. Context is NOT a
solution for every state
problem
@gethackteam

125. Want to learn more?
#javascriptEverywhere@gethackteam
Get the code