DEV Community

Cover image for Exploring React: Understanding Props and State in Web Development
MianFaizanAmir0053
MianFaizanAmir0053

Posted on

Exploring React: Understanding Props and State in Web Development

React.js is a popular JavaScript library that is essential for front-end developers to learn. A key aspect of React is understanding the concepts of props and state and their distinctions.

This article will provide a comprehensive explanation of props and state, as well as answering some common questions related to them. Readers will gain an understanding of what props are, how to pass data with props, what state is, how to update a component’s state, what occurs when state changes, and whether state can be utilized in every component. Additionally, the article will outline the differences between props and state.

What are props?

Props is short for properties and they are used to pass data between React components. React’s data flow between components is uni-directional (from parent to child only).

How do you pass data with props?

Here is an example of how data can be passed by using props:

function ParentComponent() {
  return (
    <ChildComponent name="First Child" />
  );
}

const ChildComponent = (props) => {
  return <p>{props.name}</p>;
};
Enter fullscreen mode Exit fullscreen mode

Firstly, we need to define/get some data from the parent component and assign it to a child component’s “prop” attribute.

<ChildComponent name="First Child" />
Enter fullscreen mode Exit fullscreen mode

“Name” is a defined prop here and contains text data. Then we can pass data with props like we’re giving an argument to a function:

const ChildComponent = (props) => {
// statements
}
Enter fullscreen mode Exit fullscreen mode

And finally, we use dot notation to access the prop data and render it:

return <p>{props.name}</p>;
Enter fullscreen mode Exit fullscreen mode

What is State?

React provides a special object called state, which enables components to internally create and manage their own data, unlike props that components cannot pass data with. To clarify, components can’t share state data directly with other components, but they can manage it themselves. An example of using state is shown below.

import { useState } from 'react';
function Test() {
const [state, setState] = useState({
id: 1,
name: "test"
});
return (
<div>
<p>{state.id}</p>
<p>{state.name}</p>
</div>
);
}
Enter fullscreen mode Exit fullscreen mode

How do you update a component’s state?

In functional components, you can use the useState hook to create a state variable and its corresponding updater function. You can then use the updater function to modify the state.

import React, { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

In this example, we use the useState hook to create a state variable called count with an initial value of 0, and its corresponding updater function called setCount.

Inside the handleClick function, we use setCount to update the count state by adding 1 to the current count value.

When the user clicks the “Increment” button, the handleClick function is called, which updates the component's state using setCount(). React then re-renders the component with the new state data, causing the count value to update on the screen.

What Happens When State Changes?

When the state of a React component changes due to user-input or other events, React is immediately notified and re-renders only the component with the updated state. This results in a fast and efficient update to the DOM.

Why Use setState()?

Using the setState function in React ensures that state changes are properly applied, React is aware of state changes, and concerns are separated. Directly manipulating state can lead to unexpected behavior, issues with performance, and hard-to-debug issues.

Can We Use State in Every Component?

Previously, state could only be used in class components. Still, with the introduction of React Hooks, state can now be used in both class and functional components.

Differences Between Props and State

It’s crucial to understand the main differences between props and state to use them effectively in your React components.

Props:

Components receive data from outside with props.
Props are read-only and cannot be modified by the receiving component.
The unidirectional flow of props allows them to be passed only from parent to child.

State:

Components can create and manage their own data with state.
State data can be modified by its own component, but is private and cannot be accessed from outside the component.
Modifying state should happen with the setState() method.
In conclusion, React is a powerful JavaScript library that every front-end developer should be familiar with. Understanding the concepts of props and state is crucial for building efficient and effective React applications.

Top comments (0)