Hello! Today, we will be unlocking our mastery over states in React.js. Imagine a weather app tracking the changing weather—that's a state in React.js.

A state in React.js is similar to memory. It's knowledge stored by a component and can change over time. States can be either mutable (changeable) or immutable (unchangeable). Consider a game app where your score (state) starts at 0 and increases by 1 with each point:

JavaScript
Copy to clipboard
1import { useState } from 'react';
2
3// ScoreCounter Component
4function ScoreCounter() {
5  // Score counter starts from 0
6  const [score, setScore] = useState(0);
7
8  return (
9    <div>
10      {/* displaying the score */}
11      <p>Your score: {score}</p>
12      {/* onclick of 'Score' button, 
13          the score will increase by one */}
14      <button onClick={() => setScore(score + 1)}> Score!</button>
15    </div>
16  );
17}
18
19export default ScoreCounter;

The score is our state, and we use setScore to update it. In the code above, the setScore function increases the score each time the Score button is clicked.

Now, let's look closer at the useState hook. React hooks allow us to use React features within functional components. The useState hook enables us to create state variables. Consider the following snippet:

JavaScript
Copy to clipboard
1const [score, setScore] = useState(0);

useState(0) initializes our state variable score to 0. It's our initial state. In an online game, each player's initial score would be 0.

This useState hook returns an array with two entries: the current state (score) and a function to update it (setScore). We're using JavaScript's array destructuring to assign names to them. The setScore function lets us change the current score.

We can harness the useState hook with different types of event listeners to create more interactive components. Let's look at an example where the color of a div box changes every time a mouse hovers over it:

JavaScript
Copy to clipboard
1import { useState } from 'react';
2
3function ColorChanger() {
4  const [color, setColor] = useState('red');
5
6  return (
7    <div 
8      style={{ backgroundColor: color, height: '200px', width: '200px'}}
9      onMouseOver={() => setColor('blue')}
10      onMouseOut={() => setColor('red')}>
11    </div>
12  );
13}
14
15export default ColorChanger;

In this code, when the mouse hovers over the div (onMouseOver), the background color changes to blue, and it returns to red when the mouse pointer is moved away (onMouseOut).

Beyond numbers and strings, useState can handle complex datatypes like objects and arrays. For instance, if we have a state variable that's an object and we want to update a property in the object without changing the others, we need to do that manually since useState doesn't automatically merge the old and new states. Let's see:

JavaScript
Copy to clipboard
1import { useState } from 'react';
2
3function ProfileUpdater() { 
4  // creating a state variable profile with two properties
5  const [profile, setProfile] = useState({name: "John", age: 25});
6
7  const handleBirthday = () => {
8    // updating age while keeping the name the same
9    setProfile(currentProfile => ({...currentProfile, age: currentProfile.age + 1}));
10  };
11
12  return (
13    <div>
14      <h2>Name: {profile.name}</h2>
15      <h2>Age: {profile.age}</h2>
16      <button onClick={handleBirthday}>Happy Birthday!</button>
17    </div>
18  );
19}
20
21export default ProfileUpdater;

In this component, when the 'Happy Birthday!' button is clicked, the handleBirthday function is called, which updates the age property of profile while leaving the name property the same.

Well done! You've navigated through the terrain of states in React. You've seen how to manage these using the useState hook and how to use complex datatypes with it. Up next are practice exercises to strengthen these concepts. Keep practicing, and let's create some amazing things with React.js! 🚀