The document discusses options for managing state in React applications, including using plain React with local component state, React hooks, and Redux. It notes the advantages of Redux in enforcing separation of concerns and improving testability through a functional approach to state management, but also the additional "boilerplate" of defining everything explicitly. It proposes using Redux for data with larger scope and hooks for local component state.

1. GLOBAL SOFTWARE CONSULTANCY
Plain React, Hooks and/or Redux?
Jörn Dinkla, jdinkla@thoughtworks.com
1
© 2020 ThoughtWorks

2. “... we encourage the use of vanilla React until you
experience enough pain points to justify bringing in
Redux”
Marc Garreau and Will Faurot, Authors of “Redux in Action”
2
© 2020 ThoughtWorks

3. Plain React
● Passing state as props
○ Large property lists
○ Unclear if data is really needed or just passed through
● Duplicate versions of data
○ What to update?
○ No single point of truth
● Original data vs. derived data is difficult to distinguish
○ E.g. from the database? Or from the FE?
○ (*) If we have to manipulate data in the FE is it BFF? BFW?
The pain points
3

4. State management
● One of the biggest problem of writing correct code
○ Without state you do not need context to understand code
○ With state you have to simulate the code and context to understand it
● Pure functional programming as remedy
● Or at least
○ state should be minimized
○ … and kept as local as possible
Problems with state
4
© 2019 ThoughtWorks

5. 5
Plain react
Local state with React.Component

6. 6
Plain react
Advantages
● Easy to learn
● Feels natural to OO developers
Disadvantages
● State is local, so has to be passed around (incl. getters/setters)
● Separation into presentation and container components is not enforced
● Tight coupling, if state manipulation is not a separate function
● Can be difficult to test and debug, no “replayability”
● State is decentralized, no overview
Using local state with React.Component

7. Hooks
Overview
7
[1] https://reactjs.org/docs/hooks-reference.html

8. Hooks
● const [getter, setter] = useState(initialValue)
● useEffect( () => fetch()..., [deps])
○ Replaces componentDidMount, componentDidUpdate, and
componentWillUnmount
○ Can return cleanup function
● const ctx = createContext(); … useContext(ctx)
● useReducer()
Restriction: top level of React FunctionComponents
Using local state with React.FunctionComponent
8

9. 9
Hooks
Using local state with React.FunctionComponent

10. Advertisement from the React webpage
From https://reactjs.org/docs/hooks-intro.html#motivation
● “Hooks allow you to reuse stateful logic without changing your component
hierarchy”
● “Hooks let you split one component into smaller functions based on what
pieces are related (such as setting up a subscription or fetching data)”
● “Hooks let you use more of React’s features without classes”
● “Classes confuse both people and machines”
IMHO “very optimistic”
10

11. 11
Hooks
Advantages
● Easy to learn
● “Hooks are a way to reuse stateful logic, not state itself.” [1]
Disadvantages
● State may still be local (when no context is used), so still has to be passed around
● Tight coupling, can be difficult to test, if not in separate functions
Using local state with React.FunctionComponent
[1] https://reactjs.org/docs/hooks-overview.html

12. 12
Redux
Separation of concerns
A functional approach to state

13. 13

14. 14
Coupling between React and Redux

15. Good debugging support
Time travel included
15
© 2019 ThoughtWorks

16. 16
Redux
A functional approach to state

17. Redux and testing
● Pure functions are easy to test
○ f(Input) = Output
● Stateful functions are more difficult to test
○ f(Input, State) = (Output, newState)
● [Stateful functions running concurrently are very difficult to test]
● Redux enforces functional programming with state
○ side effects only at certain defined places: action creators and middleware
● => So easy to test
17

18. 18
Redux
Advantages
● Enforces separation of concerns
● Enforces explicit definitions (actions as types)
● Enforces Isolated points of state manipulation (reducers)
● Enforced structure improves testability
● Abstract executable model of your app without the view (store + actions)
● Not exclusive, hooks and local state may still be used
Disadvantages
● “Boilerplate” aka everything has to be defined explicitly
● Learning for devs
A functional approach to state

19. Proposal
19
© 2020 ThoughtWorks

20. Proposal
20
● Data with larger scope:
○ Use redux for the “backbone” of the data with larger scope
○ Reuse mapStateToProps/mapDispatchToProps
● Data with local scope
○ Use hooks
○ E.g. indices for dropdowns, temporary changes