Hooks

Hooks are a new feature introduced in React 16.8 that allow developers to use state and other React features in funtional componenets without using classes (Class component).
They are functions that let you use state and other React features such as context and lifecycle methods within functional components.

Before Hooks in React

Before hooks were introduced, functional components in React could not have state, and could not use lifecycle methods. To use these features, developers had to convert the functional component into a class component. This added unnecessary complexity and made the code harder to read and maintain.

Now its lot easier to make funtional compoenent with more control over class compoent which is hard to understand and maintain for beginers.Even expert React developers prefer to use functional component over React Component.

After Hooks in React JS (16.8) version

With the introduction of hooks, functional components can now use state and lifecycle methods without converting them into class components. This makes the code simpler, easier to read, and easier to maintain.

Most commonly used Hooks in React JS

Some of the commonly used hooks in React are:
1. useState
This hook is used to add state to functional components. It takes an initial value as an argument and returns an array with two elements: the current state value and a function to update it.

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

In the above example, the count state is initialized to 0, and the setCount function is used to update it.

2. useEffect
This hook is used to perform side effects in functional components. It is similar to componentDidMount, componentDidUpdate, and componentWillUnmount combined. You can use it to fetch data, manipulate the DOM, or perform any other side effect that requires access to the component’s state.

useEffect(() => { document.title = `You clicked ${count} times`;
}, [count]);

In the above example, the useEffect hook is used to update the document title whenever the count state changes.

3. useContext
This hook is used to consume a context created by the createContext API. It allows you to access the values provided by the closest Provider component.

const value = useContext(MyContext);

In the above example, the useContext hook is used to access the value provided by the MyContext provider.

Custome Hooks:

Hooks can also be created to encapsulate and reuse stateful logic across components. These are called custom hooks.

function useCustomHook() {
const [count, setCount] = useState(0); useEffect(() => { console.log(`You clicked ${count} times`);
}, [count]); return [count, setCount];
} function Component1() {
const [count, setCount] = useCustomHook(); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div>
);
} function Component2() {
const [count, setCount] = useCustomHook(); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count - 1)}> Click me </button> </div>
);
}

In the above example, the useCustomHook function is used to encapsulate the state and useEffect logic, and is then reused in two separate components.

Conclusion

In summary, hooks are a powerful feature in React that allow developers to use state and other React features within functional components. They simplify the code, make it easier to read and maintain, and encourage the reuse of stateful logic across components.

Hooks can not be conditional and can only be used in functional components.Moreover, if you use hooks in functional component then you no longer need class component.

If you like this articles on Hooks in React hit like and follow for more content like this.
Please ask any question and suggest topics to write for you.

Thank you very much for your support. Stay Blessed !

• SEO Powered Content & PR Distribution. Get Amplified Today.
• Platoblockchain. Web3 Metaverse Intelligence. Knowledge Amplified. Access Here.
• Source: https://www.codementor.io/rizatech/hooks-in-react-js-and-why-we-need-them-23e0e3fhz5