State vs Props in reactjs
Tags: beginners, javascript, react, webdev
Published: 2022-12-03 15:36:40

### What is State?
The state is an update-able structure that is used to contain data or information about the component and can change over time. The change in state can happen as a response to user action or system event. **It is the heart of the react component which determines the behavior of the component and how it will render**. A **state** must be kept as simple as possible. It represents the component's local state or information. it can only be accessed or modified inside the component or by the component directly.

### What is Props?
Props are read-only component. It is an object which stores the value of attributes of a tag and work similar to the HTML attributes. It allows passing data from one component to other components. It is similar to function arguments and can be passed to the component the same way as arguments passed in a function. Props are **immutable** so we cannot modify the props from inside the component.

### Dissimilarity between State and Props

1.
**State:** State changes can be asynchronous.
**Props:** Props are read-only.

2.
**State:** State is mutable.
**Props:** Props are immutable.

3.
**State:** State holds information about the components.
**Props:** Props allow you to pass data from one components to other components as an argument.

4.
**State:** State can be used for rendering dynamic changes with the component.
**Props:** Props used to communicate between components.

5.
**State:** State cannot be accessed by child components.
**Props:** Props can be accessed by child components.

6.
**State:** The state is internal and controlled by the React Component itself.
**Props:** Props are external and controlled by what ever renders the component.

7.
**State:** State cannot make components reusable.
**Props:** Props make components reusable.

Below table will guide you about the changing in props and state.
<table class="myTable1">
	<tr>
		<th>NO</th>
		<th>Condition</th>
    	<th>State</th>
      <th>Props</th>
	</tr>
	<tr>
		<td>1.</td>
		<td>Can get initial value from parent component?</td>
		<td>Yes</td>
      <td>Yes</td>
	</tr>
	<tr>
		<td>2.</td>
		<td>Can be changed by parent Component?</td>
		<td>No</td>
      <td>Yes</td>
	</tr>
	<tr>
		<td>3.</td>
		<td>Can set default values inside component?</td>
		<td>Yes</td>
      <td>Yes</td>
	</tr>
  <tr>
		<td>4.</td>
		<td>Can change inside component?</td>
		<td>Yes</td>
      <td>No</td>
	</tr>
    <tr>
		<td>5.</td>
		<td>Can set initial value for child component?</td>
		<td>Yes</td>
      <td>Yes</td>
	</tr>
  
    <tr>
		<td>6.</td>
		<td>Can change in child component?</td>
		<td>Yes</td>
      <td>No</td>
	</tr>
</table>

And last but not least, The component state and props share some common similarities. 

<table class="myTable1">
	<tr>
		<th>NO</th>
		<th>State and Props</th>
	</tr>
	<tr>
		<td>1.</td>
		<td>Both are plain JavaScript Object.</td>
	</tr>
	<tr>
		<td>2.</td>
		<td>Both can contain default values.</td>
	</tr>
	<tr>
		<td>3.</td>
		<td>Both are read-only when they are using this.</td>
	</tr>
</table>

See yaaa. 



[devvsakib ](https://github.com/devvsakib)