React JS Hooks - Why and How?

In this workshop, we'll take a brief look at React JS hooks, why they are needed and how they can be implemented.

Speakers/Mentors
Kartik Agarwal (https://twitter.com/kartikag01)

Agenda
- Registration and introduction.
- Why do we need hooks?
- Intro to the hooks API.
- Converting stateful components into hooks.
- Debugging hooks state with chrome dev tools.
- Converting life-cycle methods into hooks.
- Creating custom hooks.

Prerequisites
- Intermediate JS knowledge.
- Basic knowledge of ES6 and React JS.
- Node JS and NPM (to be installed on your systems).

Transcript

1. React JS Hooks - Why and How?
2. bit.ly/react-delhincr
3. Speakers/Mentors Kartik Agarwal
 @kartikag01
4. Agenda • Why do we need hooks? • Problems faced in the traditional components • How can we solve them • React Hooks introduction • Overview on Hooks apis • Converting stateful components into hooks • Diving into hooks • Debugging hooks state with chrome dev tools • Converting life-cycle methods into hooks. • Creating custom hooks.
5. Why do we use React? • Reusable Components • Sensible Data Flow • Its fun to code
6. Problems with writing React • Reusing State Logic • Huge Components • Class are confusing
7. How to deal with that • Mixins (The old way) • Higher Order Component • Render Props
8. Higher-Order Components • Requires Component Restructure • Implicit Props • Wrapper Hell
11. Render Props • Requires Component Restructure • Wrapper Hell
15. Here comes hooks Hooks are a new addition in React 16.8. They are just functions and let you use state and other React features without writing a class.
16. Rules For Hooks • Must be called at Top Level • Can be called from React functional Component
19. Hooks Apis • useState • useEffect • useContext • useReducer • useCallback • useMemo • useRef • useImperativeHandle • useLayoutEffect • useDebugValue
20. Lets start coding! https://github.com/React-Delhi-NCR/workshop-react-hooks
21. Submit you talks reactdelhincr@gmail.com
22. React JS Hooks - Why and How?