Introduction To Hooks | Hooks

Understanding and managing state in components

State is a fundamental concept in React that allows components to create and manage their own data. State is used to store data that can change over time and is specific to a component. This tutorial provides an overview of understanding and managing state in React components.

Key Points:

State is a built-in object that stores data specific to a component.
State can change over time and is managed within the component.
State updates trigger re-renders, ensuring the UI stays in sync with the data.
State is managed differently in class components and functional components.

State in Class Components

In class components, state is managed using the state property and the setState method. The state is initialized in the constructor.

// Managing state in a class component
import React, { Component } from 'react';

class Counter extends Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    };

    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.increment}>Increment</button>
            </div>
        );
    }
}

export default Counter;

State in Functional Components

In functional components, state is managed using the useState hook. The useState hook returns a state variable and a function to update it.

// Managing state in a functional component
import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

export default Counter;

Setting Initial State

In class components, the initial state is set in the constructor. In functional components, the initial state is passed as an argument to the useState hook.

// Setting initial state in class component
constructor(props) {
    super(props);
    this.state = { count: 0 };
}

// Setting initial state in functional component
const [count, setCount] = useState(0);

Updating State

State updates are made using the setState method in class components and the state updater function returned by the useState hook in functional components. State updates are asynchronous and may be batched for performance.

// Updating state in class component
this.setState({ count: this.state.count + 1 });

// Updating state in functional component
setCount(count + 1);

Conditional Rendering Based on State

State can be used to conditionally render elements in a component. This allows you to create dynamic and interactive user interfaces.

// Conditional rendering based on state
import React, { Component, useState } from 'react';

// Class component example
class Toggle extends Component {
    constructor(props) {
        super(props);
        this.state = { isOn: true };
    }

    toggle = () => {
        this.setState({ isOn: !this.state.isOn });
    };

    render() {
        return (
            <button onClick={this.toggle}>
                {this.state.isOn ? 'ON' : 'OFF'}
            </button>
        );
    }
}

// Functional component example
function Toggle() {
    const [isOn, setIsOn] = useState(true);

    return (
        <button onClick={() => setIsOn(!isOn)}>
            {isOn ? 'ON' : 'OFF'}
        </button>
    );
}

export { Toggle };

Lifting State Up

State can be lifted up to a common ancestor component to share it between multiple components. This ensures that the state is managed in a single place and passed down as props.

// Lifting state up
import React, { useState } from 'react';

function App() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <Counter count={count} setCount={setCount} />
            <Display count={count} />
        </div>
    );
}

function Counter({ count, setCount }) {
    return (
        <div>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

function Display({ count }) {
    return <p>Count: {count}</p>;
}

export default App;

Summary

In this tutorial, you learned about understanding and managing state in React components. State is a built-in object that stores data specific to a component and can change over time. You learned about managing state in class and functional components, setting initial state, updating state, conditional rendering based on state, and lifting state up to share it between components. Understanding state is essential for creating dynamic and interactive user interfaces in React.

React - Component State