Allow Functions to have access to State and other React Features without using Classes.
Direct API to react concepts like props,state,context,refs and lifecycle.
Import Hooks from react
Hooks will not work in React Class components.
Special Functions introduced in React 16.8
Hooks are defined using JavaScript Functions,Hooks represent a special type of reusable UI logic with restrictions on where they can be called.
Hooks in React
- State Hooks
- Context Hooks
- Effect Hooks
- Performance Hooks
- Custom Hooks
React comes with several Built-In Hooks like useState,useContext and useEffect.
You can create your own Hooks for your Application's needs.
Rules Of Hooks
Hooks cannot be conditional
Called inside React Functional Components or Custom Hooks
Naming Convention
Hook names must always start with the word "use" followed by a Capital letter
eg.useAuth
Eliminate the need for Class Components for State and side-effect management.
Only call Hooks at the top level in body of Functional Component,while react is rendering a function component
Dont call Hooks
- inside Conditions or Loops , Nested Functions
- After a Conditional Return statement
- in event handlers
- in Class Components
- inside Try / Catch / Finally blocks
- inside Functions passed to useMemo,useReducer or useEffect
Dont call Hooks from Regular JavaScript Functions.
Only call Hooks at the top level in body of Custom Hook
Top comments (0)