Components,Props and State in React

Updated: Jun 1

Components are the basic building units in react. They are reusable pieces of code that can be independent from each other. Components are pieces which are combined to form the bigger picture i.e., the UI in react. There are generally two types of components, Class components and Function components. Props are key-value pairs which can be passed for communication between components. For a better understanding, components maybe considered as javascript functions which render part of the UI and props are the parameters. We will deep dive into these concepts with examples in this post.



THE FUNCTIONAL ONES


The most simple way to create a react component is through function components. These are nothing but simple javascript functions without any state, in other words stateless components. You can pass props to these components from the parent component which is rendering it and use it just like any javascript function through the props parameter. Any props being passed to a component is nested inside the props object.


In the below example we create a function component "Home" in the parent component "App" and pass a prop "name".


App.js

import React from "react"; import Home from "./Home"; function App(){ return( <div className="app-body"> <Home name="Hari"/> </div> ); } export default App;


Home.js

import React from "react"; function Home(props){ return( <div>Hi my name is {props.name}</div> ) } export default Home;


As you can see they are pretty easy to create and test but are rather very simple, not much useful in complex scenarios requiring state management.

THE CLASSY WAY


If you're a fan of object oriented languages, classes need no introduction. But class components are not completely OOP. They are called as such because they use certain class concepts such as "constructors", "inheritance" and "this" keyword. A class component can be used in scenarios where state management is necessary. Every class component must extend(inherit) from React.component and may or may not have constructor or state associated with it i.e., a class component has the flexibility to be stateful or stateless. The props that is passed can be accessed using this.props object.


A stateless class component

Home.js

import React from "react"; class Home extends React.Component { render(){ return( <div> <h2>Hi my name is {this.props.name}</h2> </div> ); } } export default Home;


A stateful class component

Home.js

import React from "react"; class Home extends React.Component { constructor(props) { super(props); this.state = { name: "Hariananthan", }

} render() { return ( <div> <h2> This is the name in state {this.state.name}<br/> This is the name from props {this.props.name} </h2> </div> ); } } export default Home;


The super() refers to the parent class constructor, the parent class being React.Component. The reason for using super is javascript doesn't allow "this" keyword to be used in constructor if you do not have super(). For example, if you remove "super" from the above snippet without removing "this.state" you will get the following error,


"Cannot set property 'state' of undefined"


The super() can also be used without props parameter if you do not plan to use props within the constructor.


As mentioned earlier class components are useful in situation where state management is required. Lifecycle methods can also be used only in class components.

Affairs of the State


You might have noticed that we used a state object in the example above. What's with that?

Similar to props which are key-value pairs that can be passed between components, a state is a key-value pair which can be used to hold data pertaining to that particular component alone. State can be initialized in the constructor as in the example shown previously and the values can be changed using the setState() method. For e.g.,


this.setState({name:"Jon"})


Note that setState() triggers a re-render of the UI to update the state values, so it's never a good idea to use setState() inside render method as this will trigger a infinite loop of UI re-renders. Use setState() outside render method for handling events like Onclick ,Onchange etc. Be sure to bind the method used in the constructor.


Home.js

import React from "react"; class Home extends React.Component { constructor(props) { super(props); this.state = { name: "Hariananthan", } this.changeName = this.changeName.bind(this); } changeName () { this.setState({name: "John Doe"}); } render() { return ( <div> <h2> This is my name in state {this.state.name} </h2><br/> <button onClick={this.changeName}>Change Name</button> </div> ); } } export default Home;

Click here to learn more about component states.

Clearing the Uncertain


If you're still confused in deciding when to use function or class component you are not alone. Many assume that you can use only one or the other throughout a project but that's not the case. You can use function components and class components in conjunction if needed. The need for state management is the key to deciding which type of component to use. If what you need is a simple component which doesn't need any kind of logic manipulation but just to render some elements then function components are your go to. In any other case go for class components.


One more takeaway from this article which I din't include in since it might prove confusing to a beginner is that, with the latest versions of React(>= v16.8 ) state and lifecycle methods can be used in functional components also through the use of a concept called hooks. It's worth while to explore React hooks once you master the basics of components.



#React #Programming

52 views

©2020 by DevDecimal.