Before explaining to you all about the use of Hooks in JavaScript, let us dive a bit into the concept of 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.
Prerequisite:
- The version of Node 6 or higher
- The version of NPM must be 5.2 or higher
- For running the React AppCreate-react-app tool is needed
Defining hooks in JavaScript:
Prior to React 16.8, builders could only solve state as well as other React functionalities by the use of class components. However, in version 16.8, Hooks was added as a new pattern by React. React Hooks are used to separating stateful logic and side effects out of a functional component. JavaScript functions called hooks control how a state behaves and what impacts it has by keeping it separate from a component.
Now that the stateful logic has been isolated, we may use it in the components. You might be wondering what can be a stateful logic anyways. Well, whatever needs to define and handle a state variable locally can be termed stateful logic.
For example, it makes it possible for you to access state and many other React capabilities without creating a class.
Approaches or rules on how to create a Hook:
- It is recommended to use Hooks only at the highest level. There is no need to call Hooks within loops, conditions, or nested functions.
- React function components are used to call Hooks.
- 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: This is another example illustrating Hooks:
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
Explanation: UseState() returns a value that is an array of two values. The state variable’s initial (or starting) value is represented by the first value, and a reference to the function that can be used to update the variable is represented by the second value. Array destructuring can always be used to assign both values simultaneously so that they can be used in the component. Of course, they can also be allocated independently by assigning a variable with useState(), then the first index is assigned to one variable and its second index to another (destructuring just makes this easier).
Example 2: One more example illustrating Hooks:
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:
Explanation: The operation of useState() may appear strange at first. After all, the function being rendered is new with each render, so how does the ‘state’ persist? Behind the scenes, there is an object in memory that represents the functional component and has its own stack. When the useState() hook is called, the state variable’s value is altered and the new variable is stored in a new cell on the stack. The stack pointer is concurrently iterated to point to the last cell. After each render, the value pointed to by this stack pointer is used. When the user performs a deliberate refresh, the stack is dumped, and a new allocation in memory is performed when the component is rendered.
