Props and Data Flow in ReactJS

(or “Props are Awesome”)

ReactJS comes with a slew of new words and new definitions for existing ones. “Props” is no exception.

Not ReactJS “props”

To understand the meaning of “props” in ReactJS, I turned to the context where it is used — in this case, React components.

Components tell React what you want to render

Facebook introduced declarative components, or components for short, as the heart of ReactJS (2). In fact, everything in ReactJS is a component made up of cheap-to-create React Elements. Components return exactly one DOM element having only one parent element. If you are using JSX, for example, you can only have one parent HTML element and all other elements must be children nested under that parent.

Components vs. JS functions

Breaking components down further, components are “conceptually like JavaScript functions. They accept arbitrary, read-only inputs (props) and return React elements describing what should appear on the screen.” (4) What does that mean for you and me? It means that our components can be more dynamic and a lot more reusable. (Learn.co Props)

As far as conventions go, Component names are always capitalized - so you’ll know a component when you see one in React.

Modern Capitalization Rules

The Anatomy of a Basic Component

As any good JavaScript function would do, in order to return a value other than the default, a component must have a return statement that specifies the value to return. In this case, the default return value is undefined.(3) There are only two requirements that define a JavaScript function as a React component:

  1. The function accepts a single “props” object argument with data
  2. It returns a React element
A simple “Functional” component
The equivalent “Class” component

Whether you declare a component as a function or a class, it must never modify its own props. Such functions are called “pure” because they do not attempt to change their inputs, and always return the same result for the same inputs. All React components must act like pure functions with respect to their props.(4)

Immutable != Boring

To sum up what props are in React, they

  • Are data passed to components — values can be anything: a string, an array, functions, and so on
  • Are immutable
  • Enable components to become more reusable

So, if props are read-only, what place do they have in creating dynamic web applications? You pass a prop to your component. What happens? Does it dry up / Like a raisin in the sun?Or does it explode?. Nope — it can now be accessed by calling this.props in the render() function as well as most other React component methods.(6, 7)

Thanks to the declarative programming approach taken by React, you can just focus on what an application should look like and state the “address” of the props attribute you want expressed, instead of being concerned with manually updating DOM, adding and removing classes, and so on. Just tell React what the end result should be.

What do Props have to do with Data Flow?

There are basically two ways that data gets handled in React: props and state (available through this.state ). A third is context, not discussed here, which is more advanced and not currently guaranteed stable (React Docs: Context).

While a component can’t change its own props, it can change its state…Props and state are used as input for the render() method to determine its output. The render() method also calls the diff algorithm which recognizes any changes in the component and logs them for batching to the “real” DOM.

Credit: Tarun Sharma: “Understanding virtual DOM react js” https://www.youtube.com/watch?v=UH6dz6IGbK4

Example from React Docs

Here is an example from Components and Props in the React Docs. This code renders “Hello, Sara” on the page:

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);

Try it on CodePen.

Let’s recap what happens in this example:

  1. We call ReactDOM.render() with the <Welcome name="Sara" /> element.
  2. React calls the Welcome component with {name: 'Sara'} as the props.
  3. Our Welcome component returns a <h1>Hello, Sara</h1> element as the result.
  4. React DOM efficiently updates the DOM to match <h1>Hello, Sara</h1>.

This example does not include state, which I will go into as I learn more about it. For now, know that state is similar to props, but it is private and fully controlled by a component. For examples which do include state, see State and Lifecycle in the React Docs.

When to use Props vs. State

State only gets used if a component has an internal value that only affects that component and does not affect any of the rest of the app. If it only affects layout and nothing else, state may be appropriate. Aside from that, you want to use props (or “properties”) which are injected into every other component (1).

Credit: Tarun Sharma: “Understanding virtual DOM react js” https://www.youtube.com/watch?v=UH6dz6IGbK4

As good rule of thumb from Learn.co’s ReactJS Initial State lesson, the best way to figure out if data should go in props or state is to ask 'Will this data ever change?'. If not, it's a prop. If it will, it should go in state!


One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.