Prop vs State

While you may look at the title and think to yourself that I’m going to be discussing some kind of landmark case, what I will instead be covering is instances of a React component in JavaScript.

ReactJS

What is React?

React is a JavaScript library, made by Facebook in order to build UI components more quickly and easily. React uses Babel, a JavaScript compiler which is capable of translating programming languages into JavaScript. React uses it to convert JavaScriptXML (JSX) into JavaScript. An example of JSX and a React element would be:

const element = <h1 id =‘header’>Hello World!</h1>

JSX is an extension to JavaScript that, just like HTML can have tag names, attributes, and children. If we compare to making the same element in vanilla JavaScript,

let element = document.createElement(‘h1’)
element.id = ‘header
element.innerText = ‘Hello World!’

So JSX allows us to shorten the amount of code that we need in order to create and name elements!

React applications are usually built around a single HTML element, which React developers often call the root node.

<div id='root'></div>

The elements get rendered when the following function is called

ReactDOM.render(element, document.getElementById('root'));

React elements cannot be changed, the only way to change a React element is to render a new element every time you want to change something.

Props vs State

In a React component, props are variables passed to it by its parent component, State however is directly initialized and managed by the component. In the following example, a parent component might include a child component, and pass a prop by calling

<ChildComponent color=green/>

Inside of the ChildComponent constructor, we can access the prop

class ChildComponent extends React.Component {
  constructor(props) {
    super(props)
    console.log(props.color)
  }
}

State on the other hand would be something stated inside of the constructor:

constructor(){
   super();
   this.state={
      count: 0,
   };
}

That would be where the state gets the original data, it can be hardcoded like in the previous example, or it can come from props. The difference is that props can’t be changed while state can.

Remember when I said that React can’t change elements, it needs to be re-rendered every time you want to update it? Well, that’s where setState comes in! In the next example, we use a function to update the amount of likes a post has:

updateLikes() {
  this.setState((prevState) => {
    return { count: prevState.count +1}
  });
}

setState in the previous example takes in a function because it’s able to run asynchronously, so it needs to take a callback function instead of updating the state directly. React will update the state object and re-render the component all at the same time.

While it may be tempting to write

this.state.count = this.state.count + 1

This is bad practice because React can’t listen to the state getting updated, so your component won’t re-render.

Overall:

Props and state both hold information about the component:

Props are set by the parent component, and should not be changed

State contains information that is usually initiated inside of the component, and can be changed.

I hope you found this blog helpful, check out Facebook’s React Guide for more in depth analysis on props and state, and follow me on LinkedIn and Github