top of page
Logo der Online Agentur mdwp

Hooks API

React Hooks are a new addition in React 16.8 that allow you to use state and other React features without writing a class. They are functions that let you "hook into" React state and lifecycle features from function components.

Hooks are backward-compatible, which means they don't contain any breaking changes. Therefore, you do not need to rewrite all your class components to start using Hooks.

With the help of hooks, we can take advantage of more features in function components. Prior to Hooks, function components were called stateless components and lacked features available in class components. Hooks bring these features inside function components.

Let's use the State Hook as an example:

```jsx
import React, { useState } from 'react';

function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
```

In this example, `useState` is a Hook (we’ll talk about what this means in a moment). We call it inside a function component to add some local state to it. React will preserve this state between re-renders. `useState` returns a pair: the current state value and a function that lets you update it.

bottom of page