Sorry, but I've not yet supported your browser ( IE7 or IE8 ). Please use another, advanced, browser to view this site

thank you

Supported browsers

Stateless, functional, components in React

November 3rd, 2018
Categories: Blog, Development, Hand coded, JavaScript, react, work | Tags:

I’ve been learning React for the past year and have found many projects, and tutorials, that use class components when a stateless/functional component would be ideal.

I decided I wanted to update my very, very, outdated blog with what I’m currently currently working on, and what better way to do it than brain dump some new learnings.

The difference between the two, to me, is simple.

A Class component is used when we’re dealing with the state of a component and a stateless component, is well, used when we don’t need to deal with the state of the App. I know there’s more to it than that but if you keep that in mind when building a new component to your app then it’ll help you write a cleaner, learner, and simpler component.

Does the component have any sort of state involved? If not, it’s a functional, a dumb, component that’s pretty much just going to display the data that’s been passed to it through props.

An example, taken from a “Find what the weather is” tutorial I followed recently:

A classic React, class, component:

The example above has no state management and has a a prop of getWeather being passed down from App.js. This prop is a function that’s used to make an API call to https://www.openweathermap.org.

The above can easily be changed to a functional React component. See below:

We don’t need to import the Component from React here as we won’t be making use of the methods it supplies, such as ComponentDidMount() or ComponentWillUpdate().

Turning this in to a functional component, using ES6, also gives us some nice little features. We use an arrow function and pass in props :  Const Forms = props =>(). This allows us to drop the word “ this” from the component. All annoying quirks with JavasScripts this word are avoided. Making larger components easier to navigate. See the onSubmit

We can also drop the bind keyword! 🙏🏽

What I really like about this is that it means these components become presentational components where we focus purely on displaying data to the user. The data being passed through is handled by a higher-level component, or by flux/redux.

Other benefits are that it’s’ much easier to test and you get a performance increase. We no longer need to worry bout lifecycles or state and we know what data to expect and what should be rendered on the page.

 

I’ll be adding more to this post if I find I’ve missed out any other key pieces of information

latest work

  1. Responsive design, Responsive grid integration, Media queries, HTML5, jQuery, JavaScript, CSS3 animations

  2. Responsive carousel, design, grid and media queries, HTML5, custom jQuery & JavaScript, HTML5 & CSS3 animations, custom nomination form.

  3. Responsive design, grid and media queries, HTML5, custom jQuery & JavaScript, mobile optimised design and development

  4. Custom Wordpress posts, one page design and development, Custom JavaScript for mobile and desktop carousel switching, mobile optimised design and development

Back to top

designed & developed by Scripted Pixels Ltd