State - Next Js App Directory 13.4

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!

Comments

[Bayu Setiawan]

Hi, kindly leave a like and comment if you got new insight! 🔥