How to define JavaScript Hooks ?

Hooks are nothing but functions, that you can use to disassociate the components that can be reused from the functional components. React state and lifecycle properties can be “hooked onto” from function component code via hooks. Hooks enable you to use React without classes considering they don’t operate within classes.

Prerequisites:

• NodeJS or NPM
• React JS
• Hooks

Defining hooks in JavaScript:

Before React 16.8, developers relied on class components to address state and other functionalities. With the introduction of Hooks in version 16.8, a new paradigm emerged. React Hooks enable the segregation of stateful logic and side effects from functional components, allowing JavaScript functions, known as hooks, to govern the behavior and impacts of state independently. Once stateful logic is isolated, it can be seamlessly integrated into components. Stateful logic encompasses anything related to defining and managing a local state variable.

Approaches or rules on how to create a Hook:

1. It is recommended to use Hooks only at the highest level. There is no need to call Hooks within loops, conditions, or nested functions.
2. React function components are used to call Hooks.
3. Regular JavaScript functions can’t be used to call Hooks.

There is a number of inbuilt Hooks made available by React:

• useState: The useState hook is a unique function that is used for accepting the starting state in the form of an argument and gives outputs of two elements in the form of an array. useState calls can be used in many states. 
• useEffect: You can carry out side effects in function components using the Effect Hook. Timers, data fetching, and direct DOM updates are a few instances of side effects. Two arguments are accepted by useEffect. 
• useArray: It lessens the workload by giving us a variety of array manipulation techniques. A component of the react-hanger package is this hook.
• useReducer: The useState Hook and the reducer hook are comparable. You can use custom state logic. In useReducer we can use the dispatch method and it returns the current state also.
• useMedia: React sensor hook useMedia monitors the status of a CSS media query. The significance of the media question is not hidden as to how crucial latency is for any website.

Example 1: useState() returns an array with the state variable’s initial value and a function to update it; array destructuring simplifies simultaneous assignment for use in the component.

Javascript

import React, { useState } from 'react';

function App() {
    const click = useState('GeeksForGeeks');
    return (
        <h1>Welcome to {click}</h1>
    );
}

export default App;

Output:

Welcome to GeeksForGeeks

Example 2: useState() in React persists state by internally managing a stack in memory, with each render creating a new cell for the state variable, and the stack pointer pointing to the latest cell, ensuring state persistence between renders.

Javascript

import React, { useState } from 'react';

function App() {
    const [click, setClick] = useState(0);

    // Using array destructuring here to
    // assign initial value 0 to click
    // and a reference to the function
    // that updates click to setClick
    return (
        <div>
            <p>You clicked {click} times</p>
            <button onClick={() => setClick(click + 1)}>
                Click me
            </button>
        </div>
    );
}

export default App;

Output:

Output