Props and States in React

What are props?

Props used to pass data between react components. Data flow between components is unidirectional (from parent to child only) They are immutable hence react works faster.

How do you pass data with props?

function Seafood(props) {
  return <h2>I like { props.food } a lot!</h2>;
}

function Restaurant() {
  return (
    <>
      <h1>Name your favourite seafood</h1>
      <Car brand="Ford" />
    </>
  );
}

export default Restaurant

What is state?

Allows components to create and manage their own data. They do it internally unlike props which passes data b/w components. They are mutable. Should be passed down as props.

|| state example have to give | :- |

How are props are state related?

A parents state can become a child’s prop. The parent shares its data with the child by passing it as props. As prop is unidirectional it cannot change its data directly and are read-only. Only the parent can change the data. When a prop needs to change its data a callback function is used to handle the change. It provides the new ‘changed’ argument to the callback function.

The parent in its callback function receives the new argument and updates the internal state based on the new information. The changes in the parent state is passed down to the child prop, and it updates what the child displays.

import React from 'react';

const ParentComponent = () => {
  const message = 'Hello from Parent!';

  return (
    <div>
      <h1>{message}</h1>
      <ChildComponent message={message} />
    </div>
  );
};

const ChildComponent = (props) => {
  return (
    <div>
      <p>{props.message}</p>
    </div>
  );
};

export default ParentComponent;


  
const ChildComponent = (props) => {
  return (
    <div>
      <p>{props.message}</p>
    </div>
  );
};

export default ParentComponent;

Analogy between props and states.

Props (Properties) Example: In a bookstore, props are like book information tags attached to each shelf. The bookstore owner (parent component) provides details such as book title and author (props) to each bookshelf (child component). State Example: State is akin to the bookstore’s inventory system, tracking the availability of each book. As books are sold or restocked, the inventory (state) dynamically updates to reflect the current status. In our bookstore analogy, props are like book details displayed on price tags assigned by the owner (parent component). The individual bookshelves (child components) use these details to showcase books. Meanwhile, state mirrors the real-time inventory system, dynamically updating as books are bought or restocked, ensuring accurate representation and responsiveness within the bookstore (component).

How do you update a component’s state?

Method called setState()

this.setState({         

   id: "2020"

});

What happens when state changes?

Changes happened with user-input, triggering an event. The components are rendered based on the data which are present in the state. As state holds initial information.

React is efficient in DOM updates: When data in application changes (like state) react ensures only part of the DOM are affected with the updated state. Hence react is fast as it minimizes unnecessary work and improves performance.

Notify react about state changes: setState() tells react that the state of the component has changed and it should render the component. When react knows the state of a component changes so it triggers the re-rendering process.

2 things to note: use setState() to modify state.

States affects performance of application and shouldn’t be used unless necessary.

Can I use state in every component?

After react hooks, states can be used in class and functional components. If you are not using react hooks, you can only use state class components.

What are the differences between props and state?

Components receive data from outside with props	State can create and manage their own data internally
Props are used to pass data	States are used to manage data
Data from props read-only, a component cannot modify when it receives data from outside.	State can modify their own component. Although it cannot be accessed from outside as it is private.
Data flow b/w components is unidirectional (from parent to child only)	use setState() to modify state.

Let’s see the benefits of props and states

Benefits of props

Reusability

Components that use props can be reused across various parts of application or in different applications too. This facilitates reusability of code which promotes time saving and reduces redundancy in code as well.

Immutability

Props are immutable, that is, their values cannot be changed by the receiving component. This maintains the code in a unidirectional manner and makes it easier to trace the changes happening across the application.

Customization

One component can render different content based on the prop it receives, this makes it versatile for building an application.

Benefits of State

Dynamic UI rendering

When the state of a component changes, react re-renders the components and reflects those changes in the application by updating its UI.

Local Scope

When changes are made to the state of the component its changes, does not affect other state of the components. In that way, state is local to the component that owns it. It provides encapsulation and isolation.

Conclusion

Here, we saw how props and states are used together and effectively and are crucial for building dynamic applications. We saw states and props are related to one another, with an analogy and their distinct characters. And what happens when state changes and how those changes are reflected. Lastly we saw the benefits of props and states. They are key components to react and this combination provides flexibility, modularity to React applications.