× logo Home HTML CSS Javascript React-App Angular.js logo
logo

What the Heck is React-Hoolks ?

Hooks is a feature that will be introduced in React 16.7, and is going to change how we write React apps in the future.

Introducing Hooks.

Hooks are a new addition in React 16.7. They let you use state and other React features without writing a class.
To solve these problems, Hooks let you use more of React's features without classes. Conceptually, React components have always been closer to functions. Hooks embrace functions, but without sacrificing the practical spirit of React. Hooks provide access to imperative escape hatches and don't require you to learn complex functional or reactive programming techniques.

How do you create a custom hook?
A hook is a function that conventionally starts with use. It can accept an arbitrary number of arguments, and return anything it wants.

How to use the state hook in a React function component?
Using the useState() API, you can create a new state variable, and have a way to alter it. useState() accepts the initial value of the state item and returns an array containing the state variable, and the function you call to alter the state. Since it returns an array we use array destructuring to access each individual item, like this: const [count, setCount] = useState(0) You can add as many useState() calls you want, to create as many state variables as you want. Just make sure you call it in the top level of a component (not in an if or in any other block).

Coming up soon

logo