Table of Contents
What are hooks in ReactJS?
In ReactJS, “hooks” are like special tools that help you do different things in your app. Imagine you’re building a toy car. These hooks are like the special gears and gadgets that make your car super cool.
For instance, if you want to remember something in your app, you can use a “useState” hook. It’s like having a small notebook where you jot down important things. If you want to do something after a specific event, you can use the “useEffect” hook. It’s like setting a reminder to play outside after finishing your homework.
Important React Hooks list
useState hook
It helps you keep track of things that can change in your app, like a number or a name.
Suppose you’re making a digital to-do list. You can use the useState hook to keep track of each item on your list. It’s like having a special notepad where you write down each task. If you want to add a new task, you can use the useState hook to add it to your list. If you want to change a task, you can use it to update the information.
const [count, setCount] = useState(0);useEffect hook
This one is like a reminder to do something after you’ve finished doing everything else. For example, you can remember to feed your pet after you finish your homework.
Suppose you’re playing with a toy and you want a special treat after you’re done playing. The useEffect hook is like setting up a special reminder for your treat. If you want something to happen after a specific event, you can use the useEffect hook to make it happen.
useEffect(() => {
// Side effect code here
}, [dependencies]);useContext hook
Imagine you have a secret way to share your toys with your friends without telling them directly. That’s what this does, it helps you share things with other parts of your program without passing them around all the time.
Suppose, if you have a theme you want to apply to different parts of your app, you can use the useContext hook to share it everywhere. If you want to access user information from different components, the useContext hook can help you do that. It’s like having a magic bridge that lets you send messages to all your friends at once.
In simple words, the useContext hook is like a special tool that helps you share important stuff with different parts of your app without any hassle.
const value = useContext(MyContext);useCallback hook
It’s like having a photocopy of your favorite book page. You make a copy only when the page changes, so you don’t waste time making the same copy over and over.
Suppose you have a favorite game that you like to play with your friends. You can use the useCallback hook to remember exactly how to play that game. If you want to save a specific way of doing something, you can use the useCallback hook to keep it safe.
In simple terms, the useCallback hook is like having a safe place to store your favorite activities or functions, so you can use them whenever you want without worrying about them changing.
const memoizedCallback = useCallback(() => {
// callback code
}, [dependencies]);useReducer hook
This is like a smart way to handle lots of different tasks. It helps you manage complex jobs one after the other without getting mixed up
Suppose you’re trying to manage a lot of tasks, and you want a smart way to handle them one by one. You can use the useReducer hook as a special plan for managing these tasks. If you need to deal with more complex changes in your app, the useReducer hook can help you keep things organized.
const [state, dispatch] = useReducer(reducer, initialState);useMemo hook
This is like having a calculator that remembers the answers to difficult math problems so that it doesn’t have to solve them again and again.
Suppose you have a difficult math problem that takes a long time to solve. If you want to save the answer so you don’t have to solve it again, you can use the useMemo hook. It’s like writing down the answer in a notebook, so you can easily check it later.
For example, if you have a big list that needs to be sorted, you can use the useMemo hook to remember the sorted list. If you have a complex calculation in your app that is time-consuming, you can use the useMemo hook to remember the result. It’s like having a special calculator that remembers the answer to a tough question.
const memoizedValue = useMemo(() => computeSomeValue(a, b), [a, b]);Also Read: Build a Simple ToDo App using React JS Functional Components and Hooks
useRef hook
It’s like having a sticky note that you can stick on something important. You can check it anytime, and it stays there even if other things change
Suppose you’re reading a book and want to remember the page you stopped at, even if you close the book. The useRef hook is like putting a special bookmark on that page. If you want to keep track of something in your app, even when other things change, you can use the useRef hook to help you.
In simple terms, the useRef hook is like a helpful tool that lets you remember and focus on specific things in your app, even when other things are happening.
const inputRef = useRef(initialValue);Above we have listed some important ReactJS Hooks. I hope this post improved your knowledge about ReactJS.