Hooks are functions that allow you to 'hook into' the state and the lifecycle features of React from functional components. They have been introduced in React 16.8 version. Hooks don't work within classes; they are designed to give functional components the ability to use state and other React features without having to write a class component. Some popular React hooks include useState, useEffect, useContext, and more. Each hook has a distinct purpose and used in different situations.

useState Hook

React's useState hook allows you to add state to your functional components. Unlike class components, the state here is not an object. It's an array where the first index is the state variable and the second is the function that can modify this state variable.

const [count, setCount] = useState(0);

useEffect Hook

React's useEffect hook allows you to perform side effects in your components, such as data fetching, manually changing the DOM, and so on. It runs after every single render which includes the first render and also when the state is updated. The useEffect hooks takes two arguments. The first one is a function where we put our side effects and the second argument is an array where we can specify which state or props the effect should watch.

useEffect(() => {
 console.log('rendered');
}, [count]);

useContext Hook

React's useContext hook allows you to use context without wrapping a component in a Consumer component. It makes it easier to access the value of context anywhere in the function component.

const MyContext = React.createContext();
const value = useContext(MyContext);

Rules of Hooks

There are two important rules for using hooks. First, only call hooks at the top level. Don't call hooks inside loops, conditions, or nested functions. Second, only call hooks from React function components. Don't call hooks from regular JavaScript functions or class components.

React JS is like a digital box of building blocks. It's used by people who make websites to put together different parts of a website, like the buttons, the menus, and the pages, much like how you would use blocks to build a big tower or a house!

Then, what are Hooks?

In React JS, Hooks are like our special tools. Imagine you're playing a game and you have special abilities or tools that help you play better or do new things. Similarly, Hooks let us do extra things in React JS that we can't do with just blocks. For example, a Hook might let us remember something important while we're playing, like a special code or a clue.

An example of a Hook

One example of a Hook is called 'useState'. It's like a special box where we can store something and use it later. Imagine you're playing a game and you found a special key. The key opens a magical door, but you don't need to open the door right now. You can put the key in your special useState box, keep playing the game, and when you find that magical door, open the box and there's the key, ready to use!

const [key, setKey] = useState('');

How we use Hooks

So when we want to use our Hooks, or special tools, in React JS, we put them at the top of our building block. That way, whenever we need them, they are easy to find and use!

function MagicDoor() {
  const [key, setKey] = useState('');
  // Now we can use key, and setKey to change it!
}