What is state in React and how does it work?

What is state in React and how does it work?

State in React is an object that holds data that may change over the lifecycle of a component. It allows components to respond to user input, server responses, and other events.

Can you give me an example of how to use state in a functional component?

Sure! You can use the useState hook. 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 me</button>
    </div>
  );
}

What happens when the state changes?

When the state changes, React re-renders the component to reflect the new state. This ensures that the UI is always in sync with the underlying data.

Are there any best practices for managing state in React?

Yes! Some best practices include keeping state as simple as possible, lifting state up when necessary, and using context or state management libraries for complex applications.