React Props and State: The Lifeline of Components 🫀

Hello dear developer friends, if the coffees are ready, we are ready too. 🚀 Today’s topic is React. I wish you good readings 👩🏻‍💻

✨ Topics in this article:

1)What Are Props?

2)Why Do We Use Props?

3)How to Use Props?

4)Children Props

5)What Is State?

6)Why Do We Use State?

7)How to Use State?

8)What Are the Differences Between Props and State?

✨What Are Props?

Props are data given as input to React components, meaning “properties”. They are used for data transmission from parent components to child components in a React application.

React has a component-based structure. This allows the application to be divided into small, independent, and reusable parts. Each component can manage its internal state and work independently. This makes the application more manageable in a modular structure by dividing it into smaller parts.

Props are read-only and enable the creation of dynamic and interactive components with the data received from the parent component.

✨ Why Do We Use Props?

1. Data Flow: Props enable a top-down data flow in the React component hierarchy. This facilitates data communication between components in different parts of the application.
2. Reusability: Props allow components to be customized based on props, making them reusable for different situations.
3. Readability and Maintenance: The use of props clearly defines what data a component expects and how it should be used. This improves the readability of the code and facilitates its maintenance in the long term.
4. Component Abstraction: Props reduce dependencies between components. Components perform their functions based on the data they receive through props, allowing them to be developed and tested independently of each other.
5. Dynamic UI Creation: Props allow components to dynamically change content and style.

✨How to Use Props?

When using JavaScript:

// parent component
function App() {
  return (
    <div>
      <User name="Esra" />
    </div>
  );
}
// child component
function User(props) {
  return <div>Hi, {props.name}!</div>;
}

In this example, there is a parent component named App and a child component named User. Inside the App component, a prop called name is sent to the User component. This prop is accessed through the props object in the User component and is used to display the user’s name.

When using TypeScript:

// parent component
function App() {
  return (
    <div>
      <User name="Esra" />
    </div>
  );
}
// child component
interface Props{
    name:string
};

const User = (props: Props) => {
  return <div>{props.name}</div>;
};
export default User;

In this example, the use of props is enhanced with type safety. First, an interface named Props is defined, specifying that the name property must be a string. Then, in the User component, it is indicated that the props parameter will be of this interface type.

To access elements within the props object as ‘{name}’ instead of ‘{props.name}’, use ‘({props})’.

interface Props{
    name:string
};

const PropsTricks = ({name}: Props) => {
  return <div>{name}</div>;
};
export default PropsTricks;

✨Children Props

In React, the children prop is a special prop used to pass the content of one component to another. This allows parent components to directly transfer their JSX structure to child components.

When using JavaScript:

// parent component
function App() {
  return (
    <>
      <ChildrenProps >
      <h2>Children Element</h2>
      </ChildrenProps>
    </>
  );
}
// childe component
const ChildrenProps = ({ children }) => {
  return (
    <>
      <div>{children}</div>
    </>
  );
};

export default ChildrenProps;

When using TypeScript:

// parent component
function App() {
  return (
    <>
      <ChildrenProps >
      <h2>Children Element</h2>
      </ChildrenProps>
    </>
  );
}
// child component
import { ReactNode } from "react";

interface Props {
  children: ReactNode;
}
const ChildrenProps = ({children }: Props) => {
  return (
    <>
      <div>{children}</div>
    </>
  );
};

export default ChildrenProps;

✨What Is State?

In React, “state” represents data that a component can track throughout its life and can change over time.

State is used to manage dynamic data such as user interactions, data from the server, form entries, etc. When a component’s state changes, React automatically re-renders the component, ensuring the user interface stays synchronized with the latest data.

✨ Why Do We Use State?

1. Dynamic Data Management: State is used when the UI (user interface) needs to update automatically in response to user interactions.
2. Component-Based Architecture: State allows each component to encapsulate its internal state and share data with other components only when necessary. This facilitates easier management, understanding, and debugging of the application.
3. Re-rendering Control: When the state changes, React automatically re-renders the relevant component. This ensures the application always reflects the current data and eliminates the need for manual DOM updates.
4. Improving User Experience: State can be used to manage form inputs, animations, timers, and other user interactions. This provides a richer and more interactive experience for users.
5. Overall Application State Management: In larger and more complex applications, using state management libraries like Redux along with state allows for centralized management of the application’s overall state.
6. Performance Optimization: State ensures that only the necessary components are re-rendered, preventing unnecessary updates and thus improving the performance of the application.

✨How to Use State?

When using JavaScript:

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

  return (
    <>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
    </>
  );
}

In this example, a counter application is created within an App functional component using the useState hook. useState takes an initial value of 0 and returns two values: count (the current state value) and setCount (a function to update the state). Every time the button is clicked, the setCount function is called, and the count value is increased by one. Thus, the text on the button is dynamically updated.

When using TypeScript:

import { useState } from "react";

const State = () => {
  const [count, setCount] = useState<number>(0);
  return (
    <>
      <button onClick={() => setCount((count) => count + 1)}>
        count is {count}
      </button>
    </>
  );
};
export default State;

In this example, the use of useState is specified with a type. The expression useState<number>(0) indicates that useState will return a number type.

✨What Are the Differences Between Props and State?

• Props are given from outside; state is managed within a component.
• While props are immutable, state can be changed.
• Props are used for communication between components, whereas state is used to manage a component’s internal state.

You can check out examples related to Props and State : props-and-state

If you enjoyed the article, don’t forget to check out my other content. Happy reading! 📚

You can buy me a coffee to support me 🌟

If you want to get in touch with me: Esra Nur Mülkpınar