SlideShare a Scribd company logo

Plain react, hooks and/or Redux ?

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 of 20
Download to read offline
GLOBAL SOFTWARE CONSULTANCY
Plain React, Hooks and/or Redux?
Jörn Dinkla, jdinkla@thoughtworks.com
1
© 2020 ThoughtWorks
“... 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
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
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
Plain react
Local state with React.Component
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
Hooks
Overview
7
[1] https://reactjs.org/docs/hooks-reference.html
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
Hooks
Using local state with React.FunctionComponent
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
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
Redux
Separation of concerns
A functional approach to state
13
14
Coupling between React and Redux
Good debugging support
Time travel included
15
© 2019 ThoughtWorks
16
Redux
A functional approach to state
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
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
Proposal
19
© 2020 ThoughtWorks
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

Recommended

Fabio Biondi - Front-end data architectures in Angular, Redux & NGRX - Codemo...
Fabio Biondi - Front-end data architectures in Angular, Redux & NGRX - Codemo...Fabio Biondi - Front-end data architectures in Angular, Redux & NGRX - Codemo...
Fabio Biondi - Front-end data architectures in Angular, Redux & NGRX - Codemo...Codemotion
 
Do and Don't summary of React Component Lifecycle Methods
Do and Don't summary of React Component Lifecycle MethodsDo and Don't summary of React Component Lifecycle Methods
Do and Don't summary of React Component Lifecycle MethodsSunil Mishra
 
Getting Started with NgRx (Redux) Angular
Getting Started with NgRx (Redux) AngularGetting Started with NgRx (Redux) Angular
Getting Started with NgRx (Redux) AngularGustavo Costa
 
React redux-redux-saga-rahil-memon
React redux-redux-saga-rahil-memonReact redux-redux-saga-rahil-memon
React redux-redux-saga-rahil-memonRahilMemon5
 
Academy PRO: Advanced React Ecosystem. MobX
Academy PRO: Advanced React Ecosystem. MobXAcademy PRO: Advanced React Ecosystem. MobX
Academy PRO: Advanced React Ecosystem. MobXBinary Studio
 

More Related Content

Similar to Plain react, hooks and/or Redux ?

Understanding React hooks | Walkingtree Technologies
Understanding React hooks | Walkingtree TechnologiesUnderstanding React hooks | Walkingtree Technologies
Understanding React hooks | Walkingtree TechnologiesWalking Tree Technologies
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooksSamundra khatri
 
Concurrency - Why it's hard ?
Concurrency - Why it's hard ?Concurrency - Why it's hard ?
Concurrency - Why it's hard ?Ramith Jayasinghe
 
FRONTEND BOOTCAMP 4.pptx
FRONTEND BOOTCAMP 4.pptxFRONTEND BOOTCAMP 4.pptx
FRONTEND BOOTCAMP 4.pptxEhtesham46
 
an Introduction to Redux
an Introduction to Reduxan Introduction to Redux
an Introduction to ReduxAmin Ashtiani
 
FRU Kathmandu: Adopting with Change Frontend Architecture and Patterns
FRU Kathmandu: Adopting with Change Frontend Architecture and PatternsFRU Kathmandu: Adopting with Change Frontend Architecture and Patterns
FRU Kathmandu: Adopting with Change Frontend Architecture and PatternsLeapfrog Technology Inc.
 
Fundamental concepts of react js
Fundamental concepts of react jsFundamental concepts of react js
Fundamental concepts of react jsStephieJohn
 
"The Story of Declarative React at Grammarly: From two-way data binding with ...
"The Story of Declarative React at Grammarly: From two-way data binding with ..."The Story of Declarative React at Grammarly: From two-way data binding with ...
"The Story of Declarative React at Grammarly: From two-way data binding with ...Fwdays
 
React Workshop: Core concepts of react
React Workshop: Core concepts of reactReact Workshop: Core concepts of react
React Workshop: Core concepts of reactImran Sayed
 
Globant development week / React Redux Rorkshop
Globant development week / React Redux RorkshopGlobant development week / React Redux Rorkshop
Globant development week / React Redux RorkshopGlobant
 
Green Custard Friday Talk 21: React Hooks
Green Custard Friday Talk 21: React HooksGreen Custard Friday Talk 21: React Hooks
Green Custard Friday Talk 21: React HooksGreen Custard
 
React learning in the hard way
React   learning in the hard wayReact   learning in the hard way
React learning in the hard wayChen Feldman
 
Distributed Transaction Management in Spring & JEE
Distributed Transaction Management in Spring & JEEDistributed Transaction Management in Spring & JEE
Distributed Transaction Management in Spring & JEEMushfekur Rahman
 
React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)Chiew Carol
 
React more than just components
React   more than just componentsReact   more than just components
React more than just componentsChen Feldman
 

Similar to Plain react, hooks and/or Redux ? (20)

Understanding React hooks | Walkingtree Technologies
Understanding React hooks | Walkingtree TechnologiesUnderstanding React hooks | Walkingtree Technologies
Understanding React hooks | Walkingtree Technologies
 
Introduction to Redux.pptx
Introduction to Redux.pptxIntroduction to Redux.pptx
Introduction to Redux.pptx
 
Why Concurrency is hard ?
Why Concurrency is hard ?Why Concurrency is hard ?
Why Concurrency is hard ?
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
 
Concurrency - Why it's hard ?
Concurrency - Why it's hard ?Concurrency - Why it's hard ?
Concurrency - Why it's hard ?
 
FRONTEND BOOTCAMP 4.pptx
FRONTEND BOOTCAMP 4.pptxFRONTEND BOOTCAMP 4.pptx
FRONTEND BOOTCAMP 4.pptx
 
React workshop
React workshopReact workshop
React workshop
 
an Introduction to Redux
an Introduction to Reduxan Introduction to Redux
an Introduction to Redux
 
FRU Kathmandu: Adopting with Change Frontend Architecture and Patterns
FRU Kathmandu: Adopting with Change Frontend Architecture and PatternsFRU Kathmandu: Adopting with Change Frontend Architecture and Patterns
FRU Kathmandu: Adopting with Change Frontend Architecture and Patterns
 
Fundamental concepts of react js
Fundamental concepts of react jsFundamental concepts of react js
Fundamental concepts of react js
 
"The Story of Declarative React at Grammarly: From two-way data binding with ...
"The Story of Declarative React at Grammarly: From two-way data binding with ..."The Story of Declarative React at Grammarly: From two-way data binding with ...
"The Story of Declarative React at Grammarly: From two-way data binding with ...
 
React
ReactReact
React
 
React Workshop: Core concepts of react
React Workshop: Core concepts of reactReact Workshop: Core concepts of react
React Workshop: Core concepts of react
 
Globant development week / React Redux Rorkshop
Globant development week / React Redux RorkshopGlobant development week / React Redux Rorkshop
Globant development week / React Redux Rorkshop
 
Green Custard Friday Talk 21: React Hooks
Green Custard Friday Talk 21: React HooksGreen Custard Friday Talk 21: React Hooks
Green Custard Friday Talk 21: React Hooks
 
The Road To Redux
The Road To ReduxThe Road To Redux
The Road To Redux
 
React learning in the hard way
React   learning in the hard wayReact   learning in the hard way
React learning in the hard way
 
Distributed Transaction Management in Spring & JEE
Distributed Transaction Management in Spring & JEEDistributed Transaction Management in Spring & JEE
Distributed Transaction Management in Spring & JEE
 
React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)
 
React more than just components
React   more than just componentsReact   more than just components
React more than just components
 

More from Jörn Dinkla

Korrekte nebenläufige Anwendungen mit Koroutinen und TDD
Korrekte nebenläufige Anwendungen mit Koroutinen und TDDKorrekte nebenläufige Anwendungen mit Koroutinen und TDD
Korrekte nebenläufige Anwendungen mit Koroutinen und TDDJörn Dinkla
 
Nebenlaeufigkeit mit Koroutinen strukturieren
Nebenlaeufigkeit mit Koroutinen strukturierenNebenlaeufigkeit mit Koroutinen strukturieren
Nebenlaeufigkeit mit Koroutinen strukturierenJörn Dinkla
 
A short introduction to Kotlin
A short introduction to KotlinA short introduction to Kotlin
A short introduction to KotlinJörn Dinkla
 
Concurrency in Kotlin with coroutines
Concurrency in Kotlin with coroutinesConcurrency in Kotlin with coroutines
Concurrency in Kotlin with coroutinesJörn Dinkla
 
Nebenläufigkeit mit Kotlins Koroutinen
Nebenläufigkeit mit Kotlins KoroutinenNebenläufigkeit mit Kotlins Koroutinen
Nebenläufigkeit mit Kotlins KoroutinenJörn Dinkla
 
GPU-Computing mit CUDA und OpenCL
GPU-Computing mit CUDA und OpenCLGPU-Computing mit CUDA und OpenCL
GPU-Computing mit CUDA und OpenCLJörn Dinkla
 
Schulung: Einführung in das GPU-Computing mit NVIDIA CUDA
Schulung: Einführung in das GPU-Computing mit NVIDIA CUDASchulung: Einführung in das GPU-Computing mit NVIDIA CUDA
Schulung: Einführung in das GPU-Computing mit NVIDIA CUDAJörn Dinkla
 
Die ‚komplexe‘ Perspektive - Einführung in die digitale Wirtschaft
Die ‚komplexe‘ Perspektive - Einführung in die digitale WirtschaftDie ‚komplexe‘ Perspektive - Einführung in die digitale Wirtschaft
Die ‚komplexe‘ Perspektive - Einführung in die digitale WirtschaftJörn Dinkla
 
Geschäftsmodelle - Ein kurzer Überblick
Geschäftsmodelle -Ein kurzer ÜberblickGeschäftsmodelle -Ein kurzer Überblick
Geschäftsmodelle - Ein kurzer ÜberblickJörn Dinkla
 
Buchvorstellung "Libertarian Anarchy: Against the State" von Gerard Casey
Buchvorstellung "Libertarian Anarchy: Against the State" von Gerard CaseyBuchvorstellung "Libertarian Anarchy: Against the State" von Gerard Casey
Buchvorstellung "Libertarian Anarchy: Against the State" von Gerard CaseyJörn Dinkla
 
Multi-GPU-Computing: Eins, zwei, drei, ganz viele
Multi-GPU-Computing: Eins, zwei, drei, ganz vieleMulti-GPU-Computing: Eins, zwei, drei, ganz viele
Multi-GPU-Computing: Eins, zwei, drei, ganz vieleJörn Dinkla
 
Tipps & Tricks für den erfolgreichen Einsatz von GPU-Computing
Tipps & Tricks für den erfolgreichen Einsatz von GPU-ComputingTipps & Tricks für den erfolgreichen Einsatz von GPU-Computing
Tipps & Tricks für den erfolgreichen Einsatz von GPU-ComputingJörn Dinkla
 
GPU-Computing mit CUDA und OpenCL in der Praxis
GPU-Computing mit CUDA und OpenCL in der PraxisGPU-Computing mit CUDA und OpenCL in der Praxis
GPU-Computing mit CUDA und OpenCL in der PraxisJörn Dinkla
 
Introduction To Parallel Computing
Introduction To Parallel ComputingIntroduction To Parallel Computing
Introduction To Parallel ComputingJörn Dinkla
 
Subversion Schulung
Subversion SchulungSubversion Schulung
Subversion SchulungJörn Dinkla
 
Test-Driven-Development mit JUnit 4
Test-Driven-Development mit JUnit 4Test-Driven-Development mit JUnit 4
Test-Driven-Development mit JUnit 4Jörn Dinkla
 

More from Jörn Dinkla (17)

Korrekte nebenläufige Anwendungen mit Koroutinen und TDD
Korrekte nebenläufige Anwendungen mit Koroutinen und TDDKorrekte nebenläufige Anwendungen mit Koroutinen und TDD
Korrekte nebenläufige Anwendungen mit Koroutinen und TDD
 
Nebenlaeufigkeit mit Koroutinen strukturieren
Nebenlaeufigkeit mit Koroutinen strukturierenNebenlaeufigkeit mit Koroutinen strukturieren
Nebenlaeufigkeit mit Koroutinen strukturieren
 
A short introduction to Kotlin
A short introduction to KotlinA short introduction to Kotlin
A short introduction to Kotlin
 
Concurrency in Kotlin with coroutines
Concurrency in Kotlin with coroutinesConcurrency in Kotlin with coroutines
Concurrency in Kotlin with coroutines
 
Nebenläufigkeit mit Kotlins Koroutinen
Nebenläufigkeit mit Kotlins KoroutinenNebenläufigkeit mit Kotlins Koroutinen
Nebenläufigkeit mit Kotlins Koroutinen
 
GPU-Computing mit CUDA und OpenCL
GPU-Computing mit CUDA und OpenCLGPU-Computing mit CUDA und OpenCL
GPU-Computing mit CUDA und OpenCL
 
Schulung: Einführung in das GPU-Computing mit NVIDIA CUDA
Schulung: Einführung in das GPU-Computing mit NVIDIA CUDASchulung: Einführung in das GPU-Computing mit NVIDIA CUDA
Schulung: Einführung in das GPU-Computing mit NVIDIA CUDA
 
Die ‚komplexe‘ Perspektive - Einführung in die digitale Wirtschaft
Die ‚komplexe‘ Perspektive - Einführung in die digitale WirtschaftDie ‚komplexe‘ Perspektive - Einführung in die digitale Wirtschaft
Die ‚komplexe‘ Perspektive - Einführung in die digitale Wirtschaft
 
Geschäftsmodelle - Ein kurzer Überblick
Geschäftsmodelle -Ein kurzer ÜberblickGeschäftsmodelle -Ein kurzer Überblick
Geschäftsmodelle - Ein kurzer Überblick
 
Buchvorstellung "Libertarian Anarchy: Against the State" von Gerard Casey
Buchvorstellung "Libertarian Anarchy: Against the State" von Gerard CaseyBuchvorstellung "Libertarian Anarchy: Against the State" von Gerard Casey
Buchvorstellung "Libertarian Anarchy: Against the State" von Gerard Casey
 
Multi-GPU-Computing: Eins, zwei, drei, ganz viele
Multi-GPU-Computing: Eins, zwei, drei, ganz vieleMulti-GPU-Computing: Eins, zwei, drei, ganz viele
Multi-GPU-Computing: Eins, zwei, drei, ganz viele
 
Tipps & Tricks für den erfolgreichen Einsatz von GPU-Computing
Tipps & Tricks für den erfolgreichen Einsatz von GPU-ComputingTipps & Tricks für den erfolgreichen Einsatz von GPU-Computing
Tipps & Tricks für den erfolgreichen Einsatz von GPU-Computing
 
GPU-Computing mit CUDA und OpenCL in der Praxis
GPU-Computing mit CUDA und OpenCL in der PraxisGPU-Computing mit CUDA und OpenCL in der Praxis
GPU-Computing mit CUDA und OpenCL in der Praxis
 
Introduction To Parallel Computing
Introduction To Parallel ComputingIntroduction To Parallel Computing
Introduction To Parallel Computing
 
Subversion Schulung
Subversion SchulungSubversion Schulung
Subversion Schulung
 
Test-Driven-Development mit JUnit 4
Test-Driven-Development mit JUnit 4Test-Driven-Development mit JUnit 4
Test-Driven-Development mit JUnit 4
 
Ant im Detail
Ant im DetailAnt im Detail
Ant im Detail
 

Recently uploaded

Introduction to Research Automation with Globus
Introduction to Research Automation with GlobusIntroduction to Research Automation with Globus
Introduction to Research Automation with GlobusGlobus
 
Instrument Data Automation: The Life of a Flow
Instrument Data Automation: The Life of a FlowInstrument Data Automation: The Life of a Flow
Instrument Data Automation: The Life of a FlowGlobus
 
LLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowLLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowNaoki (Neo) SATO
 
Advanced Globus System Administration Topics
Advanced Globus System Administration TopicsAdvanced Globus System Administration Topics
Advanced Globus System Administration TopicsGlobus
 
انتزاع و هزینه - انتزاع و تاثیرات آن در توسعه و نگهداری نرم‌افزار
انتزاع و هزینه - انتزاع و تاثیرات آن در توسعه و نگهداری نرم‌افزارانتزاع و هزینه - انتزاع و تاثیرات آن در توسعه و نگهداری نرم‌افزار
انتزاع و هزینه - انتزاع و تاثیرات آن در توسعه و نگهداری نرم‌افزارsohilww
 
Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Dmitry Zinoviev
 
Role of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptxRole of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptxMindInventory
 
Joseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureJoseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureHironori Washizaki
 
How AI is preventing account fraud at web scale
How AI is preventing account fraud at web scaleHow AI is preventing account fraud at web scale
How AI is preventing account fraud at web scaleAmir Moghimi
 
Open Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and ConsOpen Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and ConsSprings
 
Agile & Scrum, Certified Scrum Master! Crash Course
Agile & Scrum,  Certified Scrum Master! Crash CourseAgile & Scrum,  Certified Scrum Master! Crash Course
Agile & Scrum, Certified Scrum Master! Crash CourseRohan Chandane
 
Workshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con FlinkWorkshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con Flinkconfluent
 
Passbolt Introduction and Usage for secret managment
Passbolt Introduction and Usage for secret managmentPassbolt Introduction and Usage for secret managment
Passbolt Introduction and Usage for secret managmentThierry Gayet
 
An Introduction to Globus for Researchers
An Introduction to Globus for ResearchersAn Introduction to Globus for Researchers
An Introduction to Globus for ResearchersGlobus
 
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...syedfaisal759877
 
Globus for System Administrators
Globus for System AdministratorsGlobus for System Administrators
Globus for System AdministratorsGlobus
 
Reliable, Remote Computation at All Scales
Reliable, Remote Computation at All ScalesReliable, Remote Computation at All Scales
Reliable, Remote Computation at All ScalesGlobus
 
Cybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCIOWomenMagazine
 
Best Practices for Data Sharing Using Globus
Best Practices for Data Sharing Using GlobusBest Practices for Data Sharing Using Globus
Best Practices for Data Sharing Using GlobusGlobus
 

Recently uploaded (20)

Introduction to Research Automation with Globus
Introduction to Research Automation with GlobusIntroduction to Research Automation with Globus
Introduction to Research Automation with Globus
 
Instrument Data Automation: The Life of a Flow
Instrument Data Automation: The Life of a FlowInstrument Data Automation: The Life of a Flow
Instrument Data Automation: The Life of a Flow
 
LLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowLLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flow
 
Advanced Globus System Administration Topics
Advanced Globus System Administration TopicsAdvanced Globus System Administration Topics
Advanced Globus System Administration Topics
 
انتزاع و هزینه - انتزاع و تاثیرات آن در توسعه و نگهداری نرم‌افزار
انتزاع و هزینه - انتزاع و تاثیرات آن در توسعه و نگهداری نرم‌افزارانتزاع و هزینه - انتزاع و تاثیرات آن در توسعه و نگهداری نرم‌افزار
انتزاع و هزینه - انتزاع و تاثیرات آن در توسعه و نگهداری نرم‌افزار
 
Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)
 
Role of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptxRole of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptx
 
Joseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureJoseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about Architecture
 
How AI is preventing account fraud at web scale
How AI is preventing account fraud at web scaleHow AI is preventing account fraud at web scale
How AI is preventing account fraud at web scale
 
Open Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and ConsOpen Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and Cons
 
Agile & Scrum, Certified Scrum Master! Crash Course
Agile & Scrum,  Certified Scrum Master! Crash CourseAgile & Scrum,  Certified Scrum Master! Crash Course
Agile & Scrum, Certified Scrum Master! Crash Course
 
Workshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con FlinkWorkshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con Flink
 
Passbolt Introduction and Usage for secret managment
Passbolt Introduction and Usage for secret managmentPassbolt Introduction and Usage for secret managment
Passbolt Introduction and Usage for secret managment
 
An Introduction to Globus for Researchers
An Introduction to Globus for ResearchersAn Introduction to Globus for Researchers
An Introduction to Globus for Researchers
 
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
 
2024 Trends Transforming Enterprise Resource Planning
2024 Trends Transforming Enterprise Resource Planning2024 Trends Transforming Enterprise Resource Planning
2024 Trends Transforming Enterprise Resource Planning
 
Globus for System Administrators
Globus for System AdministratorsGlobus for System Administrators
Globus for System Administrators
 
Reliable, Remote Computation at All Scales
Reliable, Remote Computation at All ScalesReliable, Remote Computation at All Scales
Reliable, Remote Computation at All Scales
 
Cybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdf
 
Best Practices for Data Sharing Using Globus
Best Practices for Data Sharing Using GlobusBest Practices for Data Sharing Using Globus
Best Practices for Data Sharing Using Globus
 

Plain react, hooks and/or Redux ?

  • 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
  • 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
  • 15. Good debugging support Time travel included 15 © 2019 ThoughtWorks
  • 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
  • 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