✨ An Introduction to React Hook for beginners✨
Why Hooks?
Use features of React Library by calling a hook function.
According to React,
You can now extract stateful logic from a component so it can be tested independently and reused.
Hooks allow you to reuse stateful logic without changing your component hierarchy.
Use features of React Library by calling a hook function.
According to React,
You can now extract stateful logic from a component so it can be tested independently and reused.
Hooks allow you to reuse stateful logic without changing your component hierarchy.
Some of the Inbuilt Hooks in React are
• Basic Hooks
• useState
• useEffect
• useContext
• useRef
• useReducer
• useCallback
• useMemo
• useImperativeHandle
• useLayoutEffect
• useDebugValue
• useTransition
• Basic Hooks
• useState
• useEffect
• useContext
• useRef
• useReducer
• useCallback
• useMemo
• useImperativeHandle
• useLayoutEffect
• useDebugValue
• useTransition
1) useState() Hook
It is used to handle reactive data. Data that change is often called state(s).
When the state changes React will re-render the UI.
useState returns a stateful value and a function to update it
It is used to handle reactive data. Data that change is often called state(s).
When the state changes React will re-render the UI.
useState returns a stateful value and a function to update it
2) useEffect Hook
By using this Hook, you tell React that your component needs to do something after render.
useEffect takes a function that we define and this will run whenever the state changes
By using this Hook, you tell React that your component needs to do something after render.
useEffect takes a function that we define and this will run whenever the state changes
In The above example will try to run always when the state changes
To have more control over that we can use a dependency array so that the useEffect will run only when the dependency change
To have more control over that we can use a dependency array so that the useEffect will run only when the dependency change
3) useContext Hook
It allows you to access the current value from the context provider.
Think of it as a way to access the global state
It allows you to access the current value from the context provider.
Think of it as a way to access the global state
4) useRef Hook
This Hook allows you to persist values between renders.
It is common to use it with DOM elements and its manipulation
This Hook allows you to persist values between renders.
It is common to use it with DOM elements and its manipulation
That's it, There are more which I will cover sooner or later
So did you like this post?
If you want more content on
➮ Web dev
➮Javascript / Reactjs
➮ Developer Journey
➮ ThreeJS
Check out my profile @adarsh____gupta and hit that "Follow"
So did you like this post?
If you want more content on
➮ Web dev
➮Javascript / Reactjs
➮ Developer Journey
➮ ThreeJS
Check out my profile @adarsh____gupta and hit that "Follow"
Loading suggestions...