What is State?
State is a updatable variable in React/Next js that will cause a rerender of the component
Define state in functional component use useState()
'use client'
function App() {
const [name, setName] = useState('');
return <div className="App">{name}</div>;
}
export default App;
in this example we have state namely 'name'. We can update the name value use setName
'use client'
function App() {
const [name, setName] = useState('');
function updateName() {
setName('Bayu');
}
return <div className="App">{name}</div>;
}
export default App;
So when updateName function is executed, the name value will updated from ' ' to 'Bayu'
State in client site event. So, you can't use it on server component. Make sure to add 'use client' on the top your component.
Hope this helps!