Component reusability is, without a doubt, one of the most important reasons for popularity of React. Reusing components - most basic building blocks of a web application – saves a lot of time that can be then spent on enhancing the app itself, fixing bugs, and improving user-friendliness of UI.
Speaking of fixing errors, reusable components help in that regard as well. It’s much easier to identify a broken code in a specific component and then change it, than look for errors in a monolithic app where individual pieces of code do not relate to one another like components do.
In this article, I want to talk about important React feature called props, and their important role in reusing components in React.
Props
The easiest way to explain props is to compare them to function arguments. In this analogy, components are like functions that return a piece of UI. This is actually true, as they return JSX code that describes the UI. Props are like arguments you pass to these functions to customize contents, appearance, and various other aspects of the result. This article explains how passing arguments to the navigate() function allows you to go back to previous page.
The analogy is even more accurate when it comes to function components. These functions accept argument props, and then use prop values throughout the app to implement dynamic features.
Props are uni-directional, meaning that they are always passed down from parent components to children. Whenever React notices changes to props, then it will re-render the component with modified props, as well as all of its children components. This seemingly inefficient approach is necessary to make sure React applications always display the latest state of components.
When it comes to props, React has several important rules. First of all, it is always parents that pass down props to children components. Not vice versa. This is necessary, once again, to ensure consistency of data and have one source of truth. A component that receives props can not modify it either. If data needs to be changed, it needs to happen in the parent component that passes down the data.
The actual data that gets passed down is usually stored in the state of the component. This is not always, but often the case. You can technically pass down string or any other value, but most dynamic values passed down via props come from the state.
That brings us to important distinction between state and props, two ways to store data in React.
State vs props in React
Alright, this is an important distinction, so let’s get right into it.
In functional components, state is stored in separate variables created using the useState() hook. In class components, state is an object. Whichever type of syntax you choose, state has one purpose, and a number of important rules you must follow if you don’t want your React app to crash.
Purpose of state is to store data that is likely to change throughout the lifetime of your app. For example, user inputs are very likely to change and vary from one user to the next. Storing user inputs in the state is a very common operation in React. It can help you validate users’ inputs and even display custom helpful feedback to help users do better.
When it comes to state, most important rule is that you can never directly change the state. You must always use an updater function. In case of functional components, every state variable comes with a custom function to update that variable. In class components, we use the setState() method and pass it an argument of one object that needs to replace the current state.
Props are useful to pass dynamic data into presentational components and to generally manage component relationships. This way, you can effectively encapsulate and reuse small bits of UI and still have consistency of ‘single source of truth’ which will be the parent component at the top of the tree.
Since the introduction of hooks, all components can have states. But you don’t always need to initialize a state. In fact, one of the most important skills in React is knowing when to initialize a state and when to rely on props to pass important dynamic data into presentational components.
How to set props in JSX
JSX is a templating language in React, used by nearly all React developers because its very easy to write. The main advantage of JSX is its similarity to HTML. This was intentional by React team who created JSX. By creating a template language that looked similar to well-known web development language, they made React much more accessible to beginner developers.
There are several very important differences between JSX and HTML. For one, the former allows you to embed dynamic expressions inside it. Also, despite how it looks, JSX is not a markup language, but just another way to write JavaScript. Everything written in JSX is ultimately translated into calls to React.createElement() API.
In HTML, we set attributes to customize elements appearance and functionality. Setting props follows the same principle – you can just create a custom attribute and set its value to a JavaScript value or an expression (often you will reference value from the state). Then in the child component you can use this value to do anything you want – from custom styling to displaying custom bits of content.
It’s important to realize that some attributes change from HTML to JSX. The ‘class’ attribute becomes ‘className’, and ‘for’ becomes ‘htmlFor’ in React. More about that in this guide.
If you want to embed a dynamic value inside JSX, you need to use curly braces. You are going to need this feature if you plan to pass down values from the state via props.
Summary
Props is a very important feature of React that underpins the entire ecosystem. Without props, we would not be able to reuse components, which ruins the entire purpose of React. If you want to become a React developer and build apps with basic dynamic features, you need to learn props.
Top comments (0)