Sobre a Aula
Usage of Hooks
Hooks are special functions in React that allow you to use state and other React features without writing a class. This makes the code cleaner and more readable.
Firstly, hooks are used with function components, instead of classes. This simplifies the code structure, reducing complexity. For example:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click here
</button>
</div>
);
}
Notice how the ‘useState
‘ Hook is used to manage the ‘count
‘ state without the need for a class.
Additionally, hooks can be reused between components. This promotes code reuse and makes maintenance easier. For example:
import React, { useState } from 'react';
function useCounter(initialValue) {
const [count, setCount] = useState(initialValue);
const increment = () => {
setCount(count + 1);
};
return [count, increment];
}
function Counter() {
const [count, increment] = useCounter(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={increment}>
Click here
</button>
</div>
);
}
Here, the ‘useCounter
‘ Hook is created and reused by the ‘Counter
‘ component.
Therefore, hooks are a powerful tool in React component development, simplifying the code, promoting reuse, and improving readability.
Entrar na conversa