Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for State vs Props in React
Travis Ramos
Travis Ramos

Posted on • Originally published attravislramos.com

     

State vs Props in React

In React, the two main concepts that govern the data flow within a component areState andProps. Understanding the difference between these two is crucial for building effective and maintainable React applications. Let’s dive in.

State

State refers to the internal data of a component. It represents the current condition or properties of the component. State is managed within the component itself and can be updated using the setter from youruseState() hook method.

State is typically initialized in the component’s constructor if using a Class based component, or by using theuseState() hook when using a Functional component. Typically when working on newer applications, you’ll be using functional components. If you’d like to learn more about React hooks and what all changed with their release, read my blog post about it. You can find the posthere.

Some key characteristics of State:

  • State is local to the component
  • State is private to the component
  • State can be changed over time

Here’s an example of what it looks like:

import React, { useState } from 'react';function JumpMan() {  const [jumps, setJumps] = useState(0);  return (    <div>      <p>You jumped {jumps} times.</p>      <button onClick={()=> setJumps(jumps + 1)}>Jump Again!</button>    </div>  );}
Enter fullscreen modeExit fullscreen mode

As you can see,jumps is the state, andsetJumps is what is called to update the state. Every time the button is clicked,setJumps is called and increasesjumps by 1.

Props

Props, on the other hand, are the input parameters that are passed down to a component from its parent. They are immutable, meaning they cannot be changed by the child component.

Some key characteristics of Props:

  • Props are passed from parent to child components
  • Props are read-only and cannot be modified by the child component
  • Props are used to make components more reusable and flexible

Props allow you to customize the behavior and appearance of a component without modifying the component itself. They provide a way to pass data down the component tree, enabling parent components to control the state and behavior of their children. This separation of concerns promotes modularity and makes components more independent and reusable.

Here’s an example of what it looks like:

import React from 'react';import ChildComponent from './ChildComponent';const ParentComponent = () => {  const message = "Hello from the parent component!";  return (    <div>      <h1>Parent Component</h1>      {/* Passing the 'message' prop to the ChildComponent */}      <ChildComponent message={message} />    </div>  );};export default ParentComponent;
Enter fullscreen modeExit fullscreen mode
import React from 'react';const ChildComponent = ({ message }) => {  return (    <div>      <h2>Child Component</h2>      {/* Accessing the 'message' prop passed from the ParentComponent */}      <p>{message}</p>    </div>  );};export default ChildComponent;
Enter fullscreen modeExit fullscreen mode

In this example, the parent componentParentComponent defines a variable calledmessage. It then passes this message down to its child componentChildComponent viamessage={message} The child component receives themessage prop and displays it using{message}.

Props are a powerful tool for building composable and flexible React components. By passing data through props, you can create reusable components that can be easily integrated into different parts of your application. This promotes a unidirectional data flow, where data moves from parent to child, making the application more predictable and easier to reason about.

Conclusion

Understanding the difference between state and props is essential for managing the data flow in your React applications. State is used for managing the internal data of a component, while props are used for passing data from parent to child components.

If you found this article helpful, consider subscribing to my weekly newsletter. You can findit here. It’s written for developers by a developer (me!).

Top comments(2)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
pengeszikra profile image
Peter Vivo
Pipeline operator and touch bar fanatic from Hungary.God speed you!
  • Location
    Pomaz
  • Education
    streetwise
  • Work
    full stack developer at TCS
  • Joined
• Edited on• Edited

State is local to the component -> and can be passed to any component below.
State is immutable, just modify by action or setStateAction.
Action can be passed down also to any component below, or using context, or using global state handler like redux.

CollapseExpand
 
travislramos profile image
Travis Ramos
Code + Coffee = ❤️Let's make you the best developer you can be!
  • Location
    Houston
  • Work
    Frontend Developer at WaterlooData & Full Stack Immersive Web Instructor at DigitalCrafts
  • Joined
• Edited on• Edited

Yep, exactly Peter! And when passed down to a component below (child component) it becomes a prop!

If you found this article helpful, consider subscribing to my weekly newsletter I write for developers!

travislramos.beehiiv.com/subscribe

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Code + Coffee = ❤️Let's make you the best developer you can be!
  • Location
    Houston
  • Work
    Frontend Developer at WaterlooData & Full Stack Immersive Web Instructor at DigitalCrafts
  • Joined

More fromTravis Ramos

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp