Functional programming principles are the foundation of design patterns in React. Following FP and design patterns in React leads to optimal solutions. Get to know them!

1. Design Patterns
in React
27 June, 2019
Tomasz Bąk
tb@tomaszbak.com

3. Agenda
● Why we need software design patterns?
● Principles of Functional Programming (FP)
● Design patterns in React

4. What are software design patterns?
● a description or template for how to solve a problem
● they fit between the programming paradigm and a concrete
algorithm
Programming paradigm
(i.e. OOP, functional)
Design patterns
(i.e. Container Pattern)
Algorithm
(i.e. your components)

5. Why we need software design patterns?
● to understand the high-level design of the code
● to apply proven solutions to common problems
It is often the case that you won’t need to refactor the code
later on because applying the correct design pattern to a
given problem is already an optimal solution.

6. Popular programming design patterns
● Gang of Four (GoF) design patterns
https://github.com/fbeline/design-patterns-JS
● S.O.L.I.D. principles
https://medium.com/@cramirez92/s-o-l-i-d-the-first-5-priciples-of-object-or
iented-design-with-javascript-790f6ac9b9fa

7. See more at: Functional programming design patterns by Scott Wlaschin
https://vimeo.com/113588389

8. Principles of Functional Programming (FP)
● Functions are "first class citizens"
● Immutable data structures

9. Functions composition
increase code readability
const increment = num => num + 5
const decrement = num => num - 3
const multiply = num => num * 2
const numbersOperation = num => increment(decrement(multiply(num)))
console.log(numbersOperation(15)) // 32
Source: https://codinglawyer.net/index.php/2018/01/31/taste-the-principles-of-functional-programming-in-react/

10. Functions as parameters
increase code flexibility
const numbers = [1, 5, 8, 10, 21]
const plusOne = num => num + 1
console.log(numbers.map(plusOne)) // [2, 6, 9, 11, 22]

11. Higher-order functions
help to reuse code
const numbers = [1, 5, 8, 10, 21]
const createAddingFunction = number => arr =>
arr.map(num => num + number)
const numbersPlusOne = createAddingFunction(1)
console.log(numbersPlusOne(numbers)) // [2, 6, 9, 11, 22]
Source: https://codinglawyer.net/index.php/2018/01/31/taste-the-principles-of-functional-programming-in-react/

12. Immutability
It’s not about forbidding change, but how to handle change.
Instead of modifying something you create something new
with your change applied.

13. Immutability
unintended objects mutation bug
const numbers = [1, 5, 8, 10, 21]
const numbersPlusOne = numbers => {
for(let i = 0; i < numbers.length; i++) {
numbers[i] = numbers[i] + 1
}
return numbers
}
console.log(numbersPlusOne(numbers)) // [2, 6, 9, 11, 22] - the output we wanted
console.log(numbers) // [2, 6, 9, 11, 22] - the side effect we did not want!
Source: https://codinglawyer.net/index.php/2018/01/31/taste-the-principles-of-functional-programming-in-react/

14. Immutability
create new data instead of changing data
const numbers = [1, 5, 8, 10, 21]
const createAddingFunction = number => arr => arr.map(num => num + number)
const numbersPlusOne = createAddingFunction(1)
console.log(numbersPlusOne(numbers)) // [2, 6, 9, 11, 22] - the output we wanted
console.log(numbers) // [1, 5, 8, 10, 21] - numbers are not changed by function!
Source: https://codinglawyer.net/index.php/2018/01/31/taste-the-principles-of-functional-programming-in-react/

15. Design patterns in React
● Components
● Data-Down, Actions-Up

16. React Component Patterns by Michael Chan
https://www.youtube.com/watch?v=YaZg8wg39QQ
● Stateful component
● Stateless component
● Container component
● Higher-order component
● Render props

17. reactpatterns.com
● Function component
● Destructuring props
● JSX spread attributes
● Merge destructured props with other
values
● Conditional rendering
● Children types
● Array as children
● Function as children
● Render prop
● Children pass-through
● Proxy component
● Style component
● Event switch
● Layout component
● Container component
● Higher-order component
● State hoisting
● Controlled input

18. github.com/vasanthk/react-bits
● Conditional in JSX
● Async Nature Of setState()
● Dependency Injection
● Context Wrapper
● Event Handlers
● Flux Pattern
● One Way Data Flow
● Presentational vs Container
● Third Party Integration
● Passing Function To setState()
● Decorators
● Feature Flags
● Component Switch
● Reaching Into A Component
● List Components
● Format Text via Component
● Share Tracking Logic
● Toggle UI Elements
● HOC for Feature Toggles
● HOC props proxy
● Wrapper Components
● Display Order Variations

19. Data-Down, Actions-Up

20. Summary
Functional programming principles are the foundation of
design patterns in React.
Following FP and design patterns in React leads to optimal
solutions. Get to know them!