React Components
When building out the frontend of your project with React, you’ll be needing to use React states, otherwise, you wouldn’t be using React. I’ve been working on an ongoing project for the past few weeks now and after using class components initially, I can really appreciate the advantage of functional components.
Introduction of useState
The release of React 16.8 brought with it the Hook “useState” which, as the name suggests, allowed functional components to use React states. Beforehand, to introduce state you’d use a class component, nowadays there is a choice.
Advantages
Handling state with a class component requires implementing a constructor and calling super(props) to define objects with keys and initial values. With functional components, the hook takes the initial value as an argument and can be destructured into the current state and a function to update it. This is all done on a single line whereas the class component calls for nesting and a minimum of 5 lines as shown below. On top of this, the class component needs a render method, taking up another 2 lines.
Functional
const [on, setOn] = React.useState(false);Class
constructor(props) {
super(props);
this.state = {
on: false
};
}With the state defined, you then want to access it inside your JSX. With functional components, the states can be used as simple objects. With class components you must call this.state.keyName to access the corresponding value of the state; once again a much bulkier implementation. I’ve also found that you end up using “this” all over your document and it ends up very cluttered.
Going Forward
Due to the much clunkier nature of states in-class components, I will certainly be opting for the much more concise functional component. This makes for quicker, more efficient and cleaner looking code that’s easier to read and understand. Class components aren’t going to be phased out any time soon but going forward updates will be much more focused on functional components.
Elliot Martin is a full-stack software developer working with WayMaker Digital on some ongoing software development projects. Elliot is a games master and facilitate most of the team bonding sessions at WayMaker Digital.
WayMaker Digital provides technology consulting, product design and information products, that enable our clients to consistently thrive and innovate to meet user needs. The quality of our experiences and ideas set us apart when it comes to service delivery, customer experience design and product development.
Our team of consultants have built digital experiences for leading brands with complex business scenarios ranging from startup companies to public services and from telecoms to e-commerce; no project deliverable is too complex.
Our approach: we adopt human-centred & design thinking models to solve complex business challenges, which ensure our clients are on top of their business.
Do you have a question or an enquiry; you want to discuss a project or need a free consultation? Give us a shout here.