What is State?

State in React is a way to store and manage the data that a component needs to render or update its content. It represents mutable data that can change over time, usually as a result of user interaction or updates from a server. In functional components, we use the useState hook to define and manage state.

We need state in React because:

1. Dynamic content

State allows components to display dynamic content that can change due to user interactions, such as input values, buttons being clicked, or toggles being switched.

 import { useState } from 'react';
 
 type DynamicProps= {
   message: string;
 };
 
 const DynamicComponent= ({ message} : DynamicProps) => {
   const [text, setText] = useState(message);
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setText(event.target.value);
   };
 
   return (
     <div>
       <label>
         Change the text:
         <input type="text" value={text} onChange={handleInputChange} />
       </label>
       <p>{text}</p>
     </div>
   );
 };

2. Responsiveness

By using state, React components can efficiently update only the parts of the UI that have changed, making the app feel more responsive.

import  { useState } from 'react';
 
const ResponsiveComponent= () => {
  const [count, setCount] = useState(0);
  const [isDark, setIsDark] = useState(false);
 
  const handleIncrementClick = () => {
    setCount(count + 1);
  };
 
  const handleBackgroundColorToggle = () => {
    setIsDark((prevColor) => !prevColor);
  };
 
  return (
    <div>
      <button onClick={handleIncrementClick}>Click me!</button>
      <p>Count: {count}</p>
      <div style={{ backgroundColor: isDark? 'green' : 'red' }} onClick={handleBackgroundColorToggle }>
        Click me to toggle the background color!
      </div>
    </div>
  );
};

3. Local data management

State helps in managing data locally in a component; some information doesn't need to be passed down from parent components or stored globally in the app. State allows component-specific data management, which simplifies the overall structure of the application.

import { useState } from 'react';
 
type Item = {
  id: number;
  name: string;
};
 
const SimpleComponent= () => {  
  const [items, setItems] = useState<Item[]>([]);
 
  const handleAddItemClick = () => {
    const newItem: Item = {
      id: new Date().getTime(),
      name: `Item ${items.length + 1}`
    };
    setItems([...items, newItem]);
  };
 
  const handleRemoveItemClick = (idToRemove: number) => {
    setItems(items.filter(item => item.id !== idToRemove));
  };
 
  return (
    <div>
      <button onClick={handleAddItemClick}>Add item</button>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.name}
            <button onClick={() => handleRemoveItemClick(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

4. UI logic

State enables you to build complex UI logic based on conditions and transitions that rely on mutable data. For example, opening menus or modal dialogs, showing loaders while waiting for server responses, and toggling between different views in a component.

import { useState } from 'react';
 
interface DialogProps{
  isMenuOpen: boolean;
  isLoading: boolean;
  currentView: string;
}
 
const DialogComponent= () => {
  const [state, setState] = useState<DialogProps>({
    isMenuOpen: false,
    isLoading: false,
    currentView: 'view1',
  });
 
  return (
    <div>
      {state.isLoading ? (
        <div>Loading...</div>
      ) : (
        <div>
          <button onClick={() => setState({ ...state, isMenuOpen: !state.isMenuOpen })}>
            Toggle Menu
          </button>
          {state.isMenuOpen && <div>Menu</div>}
          <div>Current view: {state.currentView}</div>
        </div>
      )}
    </div>
  );
}

In summary, state is essential in React because it helps manage mutable data within components, enabling dynamic content rendering, responsive UI updates, local data management, and sophisticated UI logic.

What Is Reactdom What Is the Difference between State and Props