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!
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/
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
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!