The new React
Download as PPTX, PDF0 likes334 views
![Maurice De Beijer [MVP], profile picture](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1750747544)
This document summarizes React hooks and new features in a presentation. It introduces basic hooks like useState and useEffect, and more advanced hooks such as useReducer, useContext and custom hooks. It also covers new features like lazy loading components, concurrent React rendering, and the potential for ReactCache to improve data loading. The goal is to explain the future of React with its increased use of hooks and functional programming principles.
The new React
- 1. The new React Maurice de Beijer - @mauricedb
- 2. Maurice de Beijer The Problem Solver Microsoft MVP Freelance developer/instructor Twitter: @mauricedb Web: http://www.TheProblemSolver.nl E-mail: maurice.de.beijer@gmail.com 2ABL - The Problem Solver
- 3. The React Newsletter © ABL - The Problem Solver 3 http://bit.ly/ReactNewsletter
- 4. Topics Intro into React hooks Basic hooks useState() useEffect() useEffect() with asynchronous actions useContext() Custom hooks Advanced hooks useDebugValue() useMemo() useReducer() useRef() Suspense lazy() StrictMode ConcurrentMode React Cache © ABL - The Problem Solver 4
- 5. Follow along Git repository with slides and code https://github.com/mauricedb/the-new-react-vilnius-2019 © ABL - The Problem Solver 5
- 6. Type it out by hand? “Typing it drills it into your brain much better than simply copying and pasting it.You're forming new neuron pathways.Those pathways are going to help you in the future. Help them out now!” © ABL - The Problem Solver 6
- 7. Prerequisites Install Node & NPM © ABL - The Problem Solver 7
- 8. Install Node.js & NPM © ABL - The Problem Solver 8
- 9. Basic hooks © ABL - The Problem Solver 9
- 10. useState() Returns a persisted stateful value and a function to update it Values can be object or scalar values Starts with an initial value Can be a lazy initialization function The updater function replaces the original state Doesn’t merge state like the class based setState() The update value can also be a function © ABL - The Problem Solver 10
- 11. Class based © ABL - The Problem Solver 11
- 12. With Hooks © ABL - The Problem Solver 12
- 13. useEffect() Accepts a function that contains imperative code The code is used to execute (asynchronous) side effects useEffect() fires after layout and paint, during a deferred event Use useLayoutEffect() for code that should not be deferred Runs both on component mount as well as updates Control when using the dependencies array Optionally return a cleanup function © ABL - The Problem Solver 13
- 14. Class based © ABL - The Problem Solver 14
- 15. With Hooks © ABL - The Problem Solver 15
- 16. useEffect() with asynchronous actions useEffect() is great for async actions like AJAX requests 👉 Make sure to never return a promise 👈 Use the effect cleanup function to cancel a pending request © ABL - The Problem Solver 16
- 17. Class based © ABL - The Problem Solver 17
- 18. With Hooks © ABL - The Problem Solver 18
- 19. useContext() Accepts a context object and returns the current context value Much easier then render props 😺 Needs to be part of <Context.Provider/> component subtree © ABL - The Problem Solver 19
- 20. Render props © ABL - The Problem Solver 20
- 21. With Hooks © ABL - The Problem Solver 21
- 22. Custom hooks Extract code from a component into a reusable custom hook Makes the code more reusable Can use other hooks as needed Just like a functional component Must be named useSomething() For React to recognize it as a hook Publish to NPM for others to use if you like See: https://nikgraf.github.io/react-hooks/ © ABL - The Problem Solver 22
- 23. Before © ABL - The Problem Solver 23
- 24. The component with custom hook © ABL - The Problem Solver 24
- 25. The custom hook © ABL - The Problem Solver 25
- 26. useDebugValue() Displays a label for a custom hook in React DevTools 👉 Useful for custom Hooks that are part of shared libraries 👈 © ABL - The Problem Solver 26
- 27. With Hooks © ABL - The Problem Solver 27
- 28. Additional Hooks © ABL - The Problem Solver 28
- 29. useMemo() Returns a memoized value Same inputs return the same result It’s a performance optimization Not as a guarantee © ABL - The Problem Solver 29
- 30. Before © ABL - The Problem Solver 30
- 31. With useMemo() © ABL - The Problem Solver 31
- 32. useReducer() A more powerful version of useState() Uses a reducer function to manage state Just like Redux The reducer function always has the same signature (oldState, action) => newState Preferred when state logic is more complex Much easier to write in aTDD style 👉The dispatch function won’t change with re-renders 👈 © ABL - The Problem Solver 32
- 33. With useState() © ABL - The Problem Solver 33
- 34. Manage state © ABL - The Problem Solver 34
- 35. Update selection © ABL - The Problem Solver 35
- 36. Update state © ABL - The Problem Solver 36
- 37. With useReducer() © ABL - The Problem Solver 37
- 38. useReducer() © ABL - The Problem Solver 38
- 39. The reducer function © ABL - The Problem Solver 39
- 40. Dispatch selection © ABL - The Problem Solver 40
- 41. Dispatch state changes © ABL - The Problem Solver 41
- 42. useRef() Maintain state between each re-render Without triggering a render on updates Typically used for DOM object and useEffect() But can be used for any kind of state © ABL - The Problem Solver 42
- 43. Manipulating DOM objects with useRef() © ABL - The Problem Solver 43
- 44. Using a DOM object © ABL - The Problem Solver 44
- 45. Remembering other values using useRef() © ABL - The Problem Solver 45
- 46. Wrong solution © ABL - The Problem Solver 46
- 47. With useRef() © ABL - The Problem Solver 47
- 48. Concurrent React © ABL - The Problem Solver 48
- 49. lazy() Create a component that is loaded dynamically With automatic bundle splitting by Webpack Requires a <Suspense /> component as a parent The fallback UI is required Typically a spinner or something similar © ABL - The Problem Solver 49
- 50. Eager Loading © ABL - The Problem Solver 50
- 51. Lazy Loading © ABL - The Problem Solver 51
- 52. StrictMode The <StrictMode /> component helps prepare for async rendering Warns about unsafe lifecycle functions like componentWillMount() As well as other deprecated React features Will try to detect illegal side effects by rendering twice The same applies to some state management functions 👉 Does nothing in a production build 👈 Will make a development build run slower © ABL - The Problem Solver 52
- 53. Not strict © ABL - The Problem Solver 53
- 54. Using <StrictMode/> © ABL - The Problem Solver 54
- 55. Fixing the strict error © ABL - The Problem Solver 55
- 56. Before © ABL - The Problem Solver 56
- 57. No more <ListGroup/> © ABL - The Problem Solver 57
- 58. Concurrent mode React can render in concurrent mode Rendering happens in time slices React can prioritize user events over other work Results in more responsive applications Either for the whole application using ReactDOM.createRoot() Or a component subtree using <ConcurrentMode/> © ABL - The Problem Solver 58
- 59. Time Slicing Demo © ABL - The Problem Solver 59
- 60. Current rendering © ABL - The Problem Solver 60
- 61. Concurrent rendering © ABL - The Problem Solver 61
- 62. ReactCache Creates a resource manager to load data asynchronous Can work with anything that return a promise Can be called from a components render() function Will pause rendering until the promise resolves 💔The NPM package is broken for the current React version 💔 © ABL - The Problem Solver 62
- 63. Rendering asynchronous data © ABL - The Problem Solver 63
- 64. The asynchronous resource © ABL - The Problem Solver 64
- 65. Conclusion The future of React is bright Functional components and hooks is the future of components But class based components will continue to work Concurrent React makes large complex application responsive Easy to implement in most cases React Cache will make data loading easier But not quite yet © ABL - The Problem Solver 65
- 66. Maurice de Beijer @mauricedb © ABL - The Problem Solver 66
Editor's Notes
- #9: https://nodejs.org/ https://www.npmjs.com/ Welcome to the From Zero to Hero with ReactJS workshop. To prevent delays it would be helpful if you could prepare your laptop ahead of time. This way we won't be overloading the local WiFi connection when getting started. There is not much needed to take part. But you will need to install NodeJS and NPM as a general dependency. To create the initial React application you will need to install Create-React-App. Use the command npm install --global create-react-app to do this. The biggest internet download is when you create the initial React application using Create-React-App. It would be helpful if you can create the initial project ahead of time. You can do this by opening a command prompt at a location where you would like the project to be on your hard drive. There execute the command create-react-app Nitflex. This will create a folder named Nitflex and add all required NPM packages to it. No time to do the setup? No need to worry about it, we will go through these steps during the workshop. With a slow internet connection, this will take a bit of time but you will still be able to do everything.