A comprehensive overview of Components, Props and State in ReactJS
As a beginner, shifting from vanilla JavaScript to a framework is a big step! The combination of feelings is weird, it’s like when you moved out for the first time to study in a college or to work in a different city; you’re excited about learning a powerful framework, but also feel homesick for vanilla JS because now you’ve to adapt to new functionalities. Components, State and Props are the first major and fundamental terms that appear when we start with React.
Having a clear understanding of these terms allows us to tread smoothly in our roadmaps, and that’s what this blog aims at.
Pieces to the UI puzzle - Components
Thinking in terms of a React app, everything is a component. For instance, let’s consider the photographic mosaic above. If the User Interface(UI) is the bigger picture, then the components are the smaller pictures that make up the mosaic. Components are independent and reusable, just like the smaller pictures that can be viewed individually and used in other parts of the mosaic as well.
They can be in the form of a JavaScript function or a ES6 class.
Function Component
Class Component
Components can refer to other components and themselves be split into smaller components. To render a component, we use ReactDOM.render(). It accepts two parameters, the element to be rendered and the container where it will be rendered. An example showing how it's done:
Pivotal Properties - Props
Props is short for ‘properties’. Props are to Components what arguments are to functions. In actuality, they are just JavaScript objects under the hood. The most important characteristics though are:
They are immutable. Once assigned a value, it can’t be changed!
Props are used to pass data between components, the data flow being unidirectional i.e, from parent to children components.
Wondering what happens if we try to forcibly give a prop a different value than what it was assigned? Let’s assume a prop named “name” that is reassigned a value, the console throws off this error:
With regards to its props, a component has to act like a pure function and restrict mutation of the prop values under any given condition. But, if that’s the case, components shouldn’t be able to handle dynamic tasks that require the data to be updated with time or events. And that’s where State comes into play.
The Vanguard of Versatility - State
State is somewhat similar to props, it is also used to refer to certain properties of the component that are JS objects. The difference being:
It is under full control of the component.
It is used to handle data inside a component, it creates and manages its data.
Let’s have a glance at how it is done.
Using State lets us make the components reusable, as when they are used again, the property values don’t necessarily remain constant, the required properties can be changed as per the use case with State.
How do we change the State after all? Well, it’s done by the setState() method when using class components. It accepts an object as an argument, which is the new State value. As for functional components, setState() doesn’t work, React hooks like useState() allow us to achieve State handling. Every time the State changes, React re-renders the part of the DOM that the component operates in.
When to use Props and when to use State?
Props can be used in scenarios where the data is dominantly static and doesn’t change with external factors of the application. For example, Usernames, section headings, user posts, etc.
State is used in scenarios where the data updates with time or events. For example, Clocks, counters, etc.
Signing off, this blog focused more on comprehensive understanding of Components, Props and State instead of technical understanding because I feel the former makes it easier to move on to the latter. Thanks for reading!