Avoid this 10 common mistakes React Developers while writing useState.

In this simple guide, we dive into the useState hook in React and identify the 10 most frequent mistakes developers encounter. Whether you’re experienced or just starting, knowing these mistakes can help you write better code. From setting up useState wrong to missing out on performance improvements, we share simple tips and best practices to boost your React skills. By the end of this article, you’ll know how to avoid common errors and use useState effectively, making your apps run smoother and faster.

1. Initializing useState Incorrectly

   Always ensure the initial state matches the expected data type. Incorrectly initializing the useState hook can lead to unexpected behavior, such as a blank screen error or Runtime error.

function App() {
  // Initializing state
  const [user, setUser] = useState();

  // Code for setUser

  // Render UI
  return (
    <div className="App">
        <img src={user.profilePic} className="App-logo" alt="logo" />
        <p>Full Name: {user.firstName} {user.LastName}</p>
    </div>
  );
}

New developers often mistakenly initialize state with incorrect data types, especially when fetching data from a server. This can lead to unexpected behaviour, such as rendering issues, if the state doesn’t match the expected data type.

To prevent such errors, always initialize useState with the expected data type. For instance, you can initialize it with an empty object to avoid potential blank page errors, as shown below:

function App() {
  // Initializing state
  const [user, setUser] = useState({});

  // Code for setUser

  // Render UI
  return (
    <div className="App">
        <img src={user.profilePic} className="App-logo" alt="logo" />
        <p>Full Name: {user.firstName} {user.LastName}</p>
    </div>
  );
}

2. Not Using Optional Chaining

Simply initializing useState with the expected data type may not prevent blank page errors, especially when accessing deeply nested properties. If any part of the chain is missing, it can cause the page to break and result in a blank screen or runtime error.

function App() {
  // Initializing state
  const [user, setUser] = useState({});

  // Code for setUser

  // Render UI
  return (
    <div className="App">
        <img src={user.profilePic} className="App-logo" alt="logo" />
        <p>First Name: {user.name.firstName}</p>
    </div>
  );
}

To avoid UI rendering issues, use conditional checks to validate state existence before accessing properties, though this can be cumbersome. The optional chaining operator (?.) simplifies this by safely accessing deeply nested properties, returning undefined if any part of the chain is missing. For example, user?.names?.firstName prevents errors by short-circuiting if user or names is undefined.

function App() {
  // Initializing state
  const [user, setUser] = useState({});

  // Code for setUser

  // Render UI
  return (
    <div className="App">
        <img src={user.profilePic} className="App-logo" alt="logo" />
        <p>First Name: {user.name?.firstName}</p>
    </div>
  );
}

3. Updating useState Directly

3. ###