Scribd
Upload
13 views16 pages

Hooks

The document provides an overview of React Hooks, introduced in React 16.8, which allow functional components to manage state and other features without using classes. It discusses the differences between Hooks and traditional state management in class components, types of Hooks including State, Context, Ref, and Effect Hooks, and their respective functionalities and syntax. Additionally, it highlights the benefits of using Hooks such as code reusability and simplified lifecycle management.

Uploaded by

anwarraja.a2023ai-ds
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views16 pages

Hooks

The document provides an overview of React Hooks, introduced in React 16.8, which allow functional components to manage state and other features without using classes. It discusses the differences between Hooks and traditional state management in class components, types of Hooks including State, Context, Ref, and Effect Hooks, and their respective functionalities and syntax. Additionally, it highlights the benefits of using Hooks such as code reusability and simplified lifecycle management.

Uploaded by

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

Hooks

➢ States
➢ Hooks vs States
➢ Types of Hooks
Hooks

• Hooks are a new addition in React 16.8.


• They let you use state and other React features
without writing a class.
ReactJS State

• The state in React is an instance of the React


Component Class that can be defined as an object that
control the behavior of the component.

• The State of a component is an object that holds some


information that may change over the lifetime of the
component.
Hooks vs States

Hooks States
Hooks are exclusive to functional States, as a concept, apply to both class and
Functional vs. components, allowing them to handle state functional components, but in different
Class Components and other React features. ways.
With hooks, state management shifted to state was managed in class components with
State Management functional components via useState. this.state and setState

With hooks like useEffect, lifecycle


management(mounting, updating, and
Lifecycle unmounting) becomes more flexible and In class components, where you needed to
Management less complex handle multiple lifecycle methods explicitly.
Hooks encourage code reuse through
custom hooks, enabling the encapsulation
of logic that can be shared across States, as a concept, don't inherently
Code Reusability components promote reusability.
Types of React Hooks

• State Hooks
• Context Hooks
• Ref Hooks
• Effect Hooks
State Hooks

• State Hooks stores and provide access to the information. To add state in
Components we use:
• useState Hook: useState Hooks provides state variable with direct
update access.
Syntax:
const [state, setState] = React.useState(initialState);
• state: The current state value.
• setState: A function used to update the state. Calling this function with
a new value triggers a re-render.
• initialState: The initial value for the state. It can be any type, including
primitive values (like strings, numbers, booleans), arrays, objects, etc.
Ex: UseState Hooks
State Hooks
• useReducer Hook: useReducer Hook provides a state variable along
with the update logic in reducer function.
• It's particularly useful when state transitions involve multiple steps or
when you need to handle different types of actions to update state.
Syntax:
const [state, dispatch] = React.useReducer(reducer, initialState);

• state: The current state value.


• dispatch: A function used to send actions to the reducer, which
determines how the state changes based on the action.
• reducer: A function that takes the current state and an action, and
returns the new state.
• initialState: The initial value for the state, which can be any data type
(such as an object, array, number, etc.).
Ex: UseReducer Hooks
React Context Hooks

• Context hooks make it possible to access the information without being


passed as a prop.
• useContext Hook:shares the data as a global data with passing down
props in component tree.
Syntax:
const contextValue = React.useContext(MyContext);
• MyContext: The context that you want to access.
• contextValue: The value provided by the context, which can be any
data type.
Ex: UseContext Hooks
React Ref Hooks

• Refs creates the variable containing the information not used for
rendering e.g. DOM nodes.
• useRef Hook:The useRef is a hook that allows to directly create a
reference to the DOM element in the functional component.
Syntax:
const refContainer = useRef(initialValue);
React Ref Hooks
Effect Hooks

• Effects connect the components and make it sync with the system. It
includes changes in browser DOM, networks and other libraries.
• useEffect Hook:useEffect Hook connects the components to external
system
• The useEffect in ReactJS is used to handle the side effects such as
fetching data and updating DOM.
• Syntax:
useEffect(<FUNCTION>, <DEPENDECY>)

• FUNCTION: contains the code to be executed when useEffect triggers.


• DEPENDENCY: is an optional parameter, useEffect triggers when the
given dependency is changed.
useEffect Hooks

You might also like