React: State and Lifecycle

The React library enables developers to create dynamic user interfaces with a component-based architecture. Two key concepts in React are **State** and **Lifecycle**. Understanding these concepts is crucial for managing data and component behavior effectively.

What is State?

State is an object that determines how that component behaves and renders. It is mutable, meaning it can be changed over time, typically in response to user actions.

Defining State

State can be defined in a class component as follows:

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

    render() {
        return (
            

                
You clicked {this.state.count} times
                 this.setState({ count: this.state.count + 1 })}>
                    Click me
                
            
        );
    }
}
                

In this example, count is a piece of state that tracks the number of button clicks.

What are Lifecycle Methods?

Lifecycle methods are hooks that allow you to run code at specific points in a component's life, such as when it mounts, updates, or unmounts.

Common Lifecycle Methods

• componentDidMount(): Invoked immediately after a component is mounted.
• componentDidUpdate(prevProps, prevState): Invoked immediately after updating occurs.
• componentWillUnmount(): Invoked immediately before a component is unmounted and destroyed.

Example of Lifecycle Methods

class Timer extends React.Component {
    constructor(props) {
        super(props);
        this.state = { seconds: 0 };
    }

    componentDidMount() {
        this.interval = setInterval(() => this.setState({ seconds: this.state.seconds + 1 }), 1000);
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    render() {
        return 
Seconds: {this.state.seconds}
;
    }
}
                

In this example, a timer increments the seconds every second, and it cleans up the interval when the component unmounts.

Managing State

Always keep state as simple as possible. Use local state for UI concerns and global state management solutions (like Redux) for application-wide data.

Using Lifecycle Methods

Use lifecycle methods judiciously. Prefer functional components and hooks in newer React versions, which can simplify state and lifecycle management.