This document discusses React hooks. It begins by outlining the agenda and logistics for the workshop. It then introduces hooks as a way to use state and other React features without writing a class. Some key hooks are described like useState, useEffect, and useReducer. The document argues that hooks help solve problems with classes by making components more modular and reusable. Code is more organized with hooks as related logic can be grouped together. Overall, hooks provide an alternative to classes and help address issues with explicit data flow and composability within components.

1. REACT HOOKS
TECH47.IN & RAZORPAY

2. JAIKANT
KUMARAN
@JAIKANTKUMARAN
JAI@TECH47.IN

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.

4. INTRODUCTION TO HOOKS

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

11. this.state
React Classes!
this.setState(newState)

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?

23. REACT.JS WORKSHOP
THANK YOU!

24. JAIKANT
KUMARAN
@JAIKANTKUMARAN
JAI@TECH47.IN

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