Hooks
· Hooks came in react version 16.8
·
React Hooks are functions that allow
functional components in React to manage state, handle side effects, and access
other React features without needing class components.
· Hooks allow you to use state
(useState) and handle side effects (useEffect) in functional components.
· React hooks allows you to use react
features without having to write a class. e.g. State of a component.
· Hooks won't work inside classes.
Why we need hooks?
· We need to understand 'this'
keyword in class components so to avoid it's confusion we can eliminate it
by using hooks.
· We need to remember to bind event
handlers in class components so we can avoid it here.
· Classes make hot reloading
unreliable.
· We are handling stateful component
logic in Classes – so better way is there in Hooks
· In class components we create
complex components for complex scenarios like data fetching / subscribing
to events, where related code is scattered, like data fetching in
componentDidMount and componentDidUpdate, so cannot break components into
smaller ones.
· Hooks let us organize the logic
inside a component into reusable isolated units.
· Replaces need for class components.
Advantages of Hooks
· Simplifies state management and
lifecycle methods in
functional components.
·
Provides reusable logic with custom hooks.
· It reduces unnecessary re-renders
through memorization.
· It provides easy migration of existing class components.
Note -
· Only call hooks at the top level.
·
Don't call inside loops, conditions, or nested functions
·
Only call hooks from react functions and not from any regular JS functions.
