Lifting State Up in React JS

Welcome to the fascinating world of React JS! In this tutorial, we'll dive deep into one of its essential features - Lifting State Up.

What is Lifting State Up?

💡 Pro Tip: Lifting State Up is a pattern in React JS that allows us to share state between components.

Why Lifting State Up?

In a React app, we often have parent-child components communication. However, when state changes happen in the child component, it can lead to problems like the child component re-rendering unnecessarily. To avoid this, we can lift the state up to the parent component and pass the updated state back down to the child component.

Prerequisites

To follow along with this tutorial, you should have a basic understanding of JavaScript and HTML. If you're new to React, check out our Getting Started with React JS tutorial first.

Example: Lifting State Up with a Counter

Let's build a simple counter app where we'll lift the state up to the parent component.

Step 1: Create the Structure

First, create a new folder named counter-app and inside it, create three files:

App.js (Parent Component)
Counter.js (Child Component)
index.js (Entry Point)

Step 2: Create the Counter Component

In Counter.js, create a simple counter component that increments and decrements a count.

javascript

// Counter.js
import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
};

export default Counter;

Step 3: Create the App Component

In App.js, we'll lift the state from the counter component and pass the state and functions back to it.

javascript

// App.js
import React from 'react';
import Counter from './Counter';

const App = () => {
  const [count, setCount] = React.useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <Counter count={count} increment={increment} decrement={decrement} />
    </div>
  );
};

export default App;

Step 4: Update Counter Component

Now, let's modify the Counter component to accept the state and functions from the App component.

javascript

// Counter.js
import React from 'react';

const Counter = ({ count, increment, decrement }) => {
  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
};

export default Counter;

📝 Note: We're using the useState hook in the App component, which allows us to manage local state in functional components.

Running the App

Now, let's run our app by adding the following code to index.js.

javascript

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Then, run the app using the following command:

bash

npm install
npm start

Quiz

That's it for this tutorial! You've learned how to lift state up in React JS by creating a simple counter app. This pattern will help you manage state effectively in your projects, making your components more efficient.

In the next tutorial, we'll explore how to manage complex state with React's Context API. Stay tuned!

Happy coding! 🚀💻