State - Next Js App Directory 13.4

Bayu Setiawan - Sep 20 '23 - - Dev Community

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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!

. . . . . . . . . . .
Terabox Video Player