Downloaded 25 times
![SMART ARRAY DE-STRUCTURING
const [count, setCount] = useState(0)
is equal to
const arr = useState(0);
const count = arr[0];
const setCount = arr[1];](https://image.slidesharecdn.com/understandingreacthooks-190204100117/85/Understanding-react-hooks-26-320.jpg)
![SMART ARRAY DE-STRUCTURING
const [count, setCount] = useState(0)
is equal to
const arr = useState(0);
const count = arr[0];
const setCount = arr[1];](https://image.slidesharecdn.com/understandingreacthooks-190204100117/75/Understanding-react-hooks-26-2048.jpg)
More Related Content
Similar to Understanding react hooks
![Full Stack React Workshop [CSSC x GDSC]](https://cdn.slidesharecdn.com/ss_thumbnails/fullstackreactworkshopcsscxgdsc-230221003415-b512c1cf-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Understanding react hooks
- 1.
- 2. He who asksa question is fool for 5 minutes, he who does not ask a question is fool for life
- 3. CAUTION Hooks is stillexperimental and in alpha. Don’t use in production. Refer official docs here
- 4. TO BE AVAILABLEIN NEXT RELEASE (MOSTLY 4 TH FEB)
- 5. WE ARE GOINGTO COVER • React in brief • Why Hooks? • Built-in Hooks • Custom Hooks • Hooks under the hood • Rules of Hooks • Hooks – a general programming pattern
- 6. WHAT IS REACT? •A declarative, efficient, and flexible JavaScript library for building user interfaces • Designed for gradual adoption, and you can use as little or as much React as you need Why do we need 2 packages React & ReactDOM?
- 7. REACT FOR INTERACTIVECOMMAND-LINE APP https://github.com/vadimdemedes/ink/tree/ next
- 8. AS A PRESENTATIONCREATION TOOL https://github.com/FormidableLabs/spectacle
- 9.
- 10. TO BUILD ASHOPPING CART https://github.com/jeffersonRibeiro/react-shopping-cart
- 11.
- 12. CREATE PHYSICS BASEDANIMATION LIBRARY https://github.com/react-spring/react-spring
- 13. RENDER TO WORDDOCUMENTS https://github.com/nitin42/redocx
- 14. MOBILE APPS ANDGAMES OF COURSE
- 15. AND MANY MORECOOL THINGS…
- 16. SOME BASIC CONCEPTS •React components – Describe how a section of UI will appear based on the props passed. Eg: Label, ShoppingCart, CreateUser - Component in technical terms is just a function/class. • Class in javascript is actually a function • And function in javascript is actually an object - And so class & function both can be stateful
- 17. PROPS ARE ARGUMENTS Functionto add 2 nos add(2, 5) What if I want total of 3 & 7 add(3,7) React accordion component <Accordion>Text</Accordion> What if I want to display as collapsed? < Accordion collapsed=“true”>Text</Accordion>
- 18. STATE IN REACT •Data that is retained between multiple calls • When state is changed, component is re- rendered(function is executed again) - First load state=loading - Once data is prepared, state=done, This triggers rendering again
- 19. HOOKS ARE HARMLESS •Completely opt-in • No breaking changes • Classes to stay for foreseeable future • Adds 1.5K (min + gzip)
- 20. WHY HOOKS? • Notan entirely new concept. Similar things tried by recompose, react- easy-state, react-recollect, reactions • Huge complex components • Reuse stateful logic • Wrapper hell when using HOC or render props • Javascript classes can be complex, more so if you have OOPS background Why do we need to write super(props)?
- 21. FUN FACTS Hooks arenot a way to share state, Hooks are a way to share stateful logic
- 23.
- 24. USESTATE • When youneed some state in your component • No need to change component to a class component • Preserves value between function calls (initialization is not done everytime)
- 25.
- 26. SMART ARRAY DE-STRUCTURING const[count, setCount] = useState(0) is equal to const arr = useState(0); const count = arr[0]; const setCount = arr[1];
- 27. USESTATE • Key differences •Initialization • State variable declaration • Reading state value • Updating state value • Setter function does not merge objects, it updates objects How can we delete a property from react state?
- 28. FUN FACT React keepshooks state in the exact same place where it keeps state for classes
- 29. USEEFFECT • Used whenyou want to perform side effects (Network requests, setting subscriptions, manual DOM changes, logging) • Can be used as replacement of componentDidMount, componentDidUpdate and componentWillUnmount lifecycle methods. • No need to change component to a class component • Unrelated tasks should be handled using different effects
- 30. Note: Different effectsare used for unrelated tasks
- 31. USEEFFECT • Arguments explained •First argument: A function that will be executed after each render (including first). Can be used as a replacement for componentDidMount & componentDidUpdate • This function may(or may not) return a function. Only when you require to perform clean up, will you need this function. The returned function is executed before executing the effect next time (some what equivalent to componentWillUnmount). • Second argument: It can be used to control when the effect should run. It is an array of items and the effect will run only if any of the array item has changed. To run an effect once, use empty array.
- 32. CUSTOM HOOKS • Toshare logic between two functions, we extract common logic to third function. • To share common logic involving hooks, we can extract the common logic into reusable functions. • It is a javascript function whose name starts with “use”(highly recommended) and that function in turn calls another Hook. • Built-in hooks used in custom hooks behave the same. • Example Why do we have to import React in functional components?
- 33. HOOKS UNDER THEHOOD You are the average of five people you spend most time with, Your code is the average of five people’s code you refer the most You don’t really need to understand this, but
- 34. USESTATE IMPLEMENTATION • Eachinstance of a component(fiber) has separate memory area for its hooks • Hooks are called in the order in which they are defined. The order has to remain same everytime. • Each setter has a reference to position of that particular hook • Sample
- 35. USEFFECT IMPLEMENTATION • Storedin updateQueue property of every component instance tag property
- 36. RULES OF HOOKS •Can only be called at top level • Cant be called inside loops, conditions or nested functions • Can only be called from React function components or custom hooks • Cant use built-in hooks inside built-in hooks
- 37. HOOKS – AGENERAL PATTERN? • Hooks API for Vue • Web components • Hooks as plain javascript functions
- 38. REFERENCES • https://reactjs.org/docs/hooks-intro.html • https://medium.com/@dan_abramov/making-sense-of-react-hooks- fdbde8803889 •https://medium.com/the-guild/under-the-hood-of-reacts-hooks- system-eb59638c9dba • https://blog.logrocket.com/react-hooks-lets-not-get-too-attached- 11b0ac09b4b5 • https://medium.com/@ryardley/react-hooks-not-magic-just-arrays- cd4f1857236e • https://www.youtube.com/watch?v=t2q6zr3Dcr8
- 39. THANK YOU ? Reach out@fraindz