React.js hooks feb 23rd meetup
- 1. REACT HOOKS TECH47.IN & RAZORPAY
- 3. LOGISTICS ‣ Use the “General” Channel on Slack to post questions at any point. ‣ I may ask you to refer code which is in the ‘react-hooks’ channel. ‣ We end when the talks end or by 5pm. Which ever occurs earlier.
- 5. QUESTIONS?
- 6. WHAT ARE HOOKS Hooks lets you use state and other React features without writing a class.
- 7. WHAT ARE HOOKS HOOKS LET YOU WRITE STATEFUL, FEATURE RICH FUNCTION COMPONENTS.
- 8. REACT COMPONENTS REACT COMPONENTS ▸ CLASS COMPONENTS ▸ FUNCTION COMPONENTS
- 9. () => <div> Hi </div> () => { fetch('someurl'); return <div> Hi </div>; }; Why class components - Is this good?
- 10. REACT CLASS CLASS COMPONENT ▸ LIFE CYCLE METHODS ▸ `THIS` ▸ STATE ▸ ComponentDidMount ▸ ComponentDidUpdate ▸ComponentWillUnmount ▸… ▸ RENDER METHOD
- 12. () => <div> Hi </div> () => { // Can do other things return <div> Hi </div>; }; Function Components
- 13. REACT CLASS HOOKS EARLIER NOW state, setState useState componentDidMount useEffect componentDidUpdate useEffect componentWillUnmount useEffect
- 14. THE SOLUTION NOW SOME HOOKS ▸ useState ▸ useReducer ▸ useEffect ▸ useRef ▸ Custom hooks ▸useContext, useCallback, useMemo, useLayoutEffect, useImperativeHandle, useDebugValue
- 15. WHY ARE REACT COMPONENTS MOVING FROM CLASSES TO HOOKS?
- 16. BETTER SOLUTION? PROBLEMS WITH CLASSES ‣ Not possible to break the components into smaller components as the stateful logic is all over the place. ‣ Classes confuse both people and machines ‣ Classes don’t minify well ‣ Make hot reloading flaky and unreliable Hooks don’t use classes.
- 17. BETTER SOLUTION? EXPLICIT DATA FLOW & COMPOSITION PROBLEMS WITHIN COMPONENTS ‣ Mutually related code, that changes together gets split apart. ‣ Unrelated code ends up combined in a single method. Hooks lets us organise related code in a component together. (useEffect)
- 18. BETTER SOLUTION? EXPLICIT DATA FLOW & COMPOSITION WITHIN COMPONENTS
- 19. BETTER SOLUTION? EXPLICIT DATA FLOW & COMPOSITION WITHIN COMPONENTS
- 21. REUSABILITY
- 22. REUSABILITY - How do we reuse code in React? - If components are re-usable, why do we need hooks? - Why sharing functions does not help? - What was the solution earlier?
- 25. REACT.JS WORKSHOP SUMMARY ‣ Hooks are javascript functions. ‣ Hooks help in code reusability. ‣ Hooks help split a component into smaller functions based on whats related. ‣ Hooks are easy to share amongst components or with community.
- 26. REACT.JS WORKSHOP NEXT STEPS ▸ Read about hooks at https://reactjs.org/docs/hooks- intro.html ▸ Start using hooks in your projects.
- 27. REACT.JS WORKSHOP Lets continue the conversation on the Slack Channel! Next Meetup - March 23rd