- Hooks let you use state and other React features without writing a class.
- React provides a few built-in Hooks like
useState
anduseEffect
. - You can also create your own custom Hooks which you can e.g. use to share and reuse stateful logic in several components.
- Don't call them inside loops, conditions or nested functions.
- It ensures that Hooks are called in the same order each time components render.
- Don't call them from Class functions or any regular JavaScript functions.
- Instead you can call them from function components.
- You can also call them from custom Hooks.
In the code below there is a simple counter which adds one (1) to counter after each render. We have used two Hooks: useState
to define count state's default value and useEffect
to run functions after each render. setTimeout
calls setCount
after one second which adds one to count state and page is re-rendered.
import { useState, useEffect } from "react";
import "./App.css";
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
setTimeout(() => {
setCount((count) => count + 1);
}, 1000);
});
return (
<div className="App">
<h1>I've rendered {count} times!</h1>
</div>
);
}
export default App;