Components, Data and React

State - https://codesandbox.io/s/state-10ccu
Redux - https://codesandbox.io/s/redux-react-redux-ux5s8
Context API - https://codesandbox.io/s/react-context-api-49ju4

Transcript

1. Components, Data and React State - Redux - Context Cezar Sampaio @cezarsmpio
3. What do they have in common?
4. Nothing, duh!
5. Sure?
7. They all have components!
9. <Fridge /> <MicroWave /> <Stove /> <Sink /> <Lamp /> <Lamp /> <Seat /> <Seat />
12. <SteeringWheel /> <InsideRearviewMirrow /> <OutsideRearviewMirror /> <MediaControl /> <GearShift /> <Pedal /> <Seat />
13. They are all independent components.
14. The <Fridge /> does not need the <Microwave /> in order to work
15. The <Seat /> does not need the <CarEngine /> in order to work
16. All components have a purpose.
17. They can interact with each other, though.
26. All of them need something in order to be alive.
27. They need energy.
28. Electricity. Food. Fuel.
29. Data.
30. Our apps need data in order to be alive.
31. What is... data?
37. Data needs to be managed. How can we do it in React?
38. Three different ways: State, Redux or Context.
39. Show me the code!
40. Pros & Cons using State Native
 Simple Good for simple apps or isolated components Not scalable Becomes a mess very quick Poor debug solution
41. Pros & Cons using Redux Business logic separated from the UI Code is very reusable and scalable Good community support Specific tools for debugging External dependency Complex to learn Very complex and high implementation cost Very high cost just to add a small feature Integration of React’s modules may require alteration and needs to be binded with the redux state.
42. Pros & Cons using Context Scalable for any application size (small, mid and large) Native, no dependency needed Can use hooks natively Business logic separated from the UI Code is very reusable and scalable Comparatively less complex than Redux Many solutions, such as redux-form, needs to be written Poor debug solution Middlewares need to be written as a custom code
43. There is no right or wrong.
44. There is what scales more and better.
45. Always ask yourself: is this solution scalable?
46. Always ask yourself: is this solution scalable enough?
47. Remember to take into account the size and complexity of your application.
48. Sometimes, state is more than enough.
49. And that’s ok, really :)
50. Obrigado! Cezar Sampaio @cezarsmpio