Scribd
Upload
15 views

Task 2 ReactHooks

Hooks help use React features without writing class components. Some commonly used hooks are useState, useEffect, useRef, useContext, useReducer, useMemo and useCallback. Rules for hooks include always calling them at the top level and only inside React functions.

Uploaded by

Kauvya Krishna Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
15 views

Task 2 ReactHooks

Hooks help use React features without writing class components. Some commonly used hooks are useState, useEffect, useRef, useContext, useReducer, useMemo and useCallback. Rules for hooks include always calling them at the top level and only inside React functions.

Uploaded by

Kauvya Krishna Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 1

React Hooks

Hooks help use React features without writing class components.

Why Hooks?
• To avoid the difficulties while writing classes – eliminating this keyword, eliminating the
need to bind event handlers adn also classes dont minify well
• Reusing stateful logic is harder by using HoC and render props. It makes code harder to
follow.
• To keep related code together. Usualy in class components its difficult.
Example:
Data fetching code: componentDidMount and componentDidUpdate
EventListeners: componentDidMount and componentWillUnmount

Hooks are supported in React version 16.8 and higher.

Rules:
Always call hooks at top level (never inside loops).
Call hooks only inside React functions and not inside standard javascript functions.

Some commonly used hooks are useState, useEffect, useRef, useContext, useReducer, useMemo
and useCallback.
We can alos write custom hooks.

useMemo vs useCallback:
• useMemo memoizes the returned value from the function
• useCallback memoizes the actual function itself.

Glimpse of some hooks:


useState: used to manage state.
UseEffect: used to perform sideEffects
useContext: used to consume contexts
useRef: used to manage refs.
UseRender: more primitive hook; used for state management

You might also like