One fundamental and efficient solution for writing well-structured and reusable React components is the use of stateless functions.

As you might expect, stateless functions are functions, not React components. They are not able to store any states; only properties can be used to pass and render data. Property updates are directly rerendered inside of the stateless functions, and cannot be handled by the componentWillReceiveProps method, as in React components.

We have written a lot of code where stateless functions can be used very easily; while doing so, we have also structured and improved the readability of our React application.

Beginning with the file structure, we will create a new folder for our new components (or stateless functions), as follows:

mkdir src/client/components

Many parts of our application need to be reworked. Create a new file for our first stateless function, as follows:

touch src/client/components/loading.js

Currently, we display a dull and boring Loading... message when our GraphQL requests are running. Let's change this by inserting the following code into the loading.js file:

import React from 'react';

export default ({color, size}) => {
  var style = {
    backgroundColor: '#6ca6fd',
    width: 40,
    height: 40,
  };

  if(typeof color !== typeof undefined) {
    style.color = color;
  }
  if(typeof size !== typeof undefined) {
    style.width = size;
    style.height = size;
  }

  return <div className="bouncer" style={style}></div>
}

In the preceding code, we are using a simple function in ES6 arrow notation. It is an easy and more concise syntax for defining functions. In the code, you can see that we are extracting the color and size fields from the properties that our function receives.

We are building a default style object that represents the basic styling for a loading spinner. You can pass the color and size separately, in order to adjust those settings.

Lastly, we are returning a simple div tag with the CSS style and the bouncer class.

What's missing here is the CSS styling. The code should look as follows; just add it to our style.css file:

.bouncer {
  margin: 20px auto;
  border-radius: 100%; 
  -webkit-animation: bounce 1.0s infinite ease-in-out;
  animation: bounce 1.0s infinite ease-in-out;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale(0)
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes bounce {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}

Like in the previous examples, we use CSS animations to display our loading spinner correctly, and to let it animate as pulsating.

We have now finished the stateless function. You should place it into the existing code, wherever a loading state exists.

First, import the new loading spinner to the top of your files, as follows:

import Loading from './components/loading';

You can then render the stateless function like any normal component, as follows:

if (loading) return <Loading />;

Start the server with npm run server and the front end with npm run client. You should now see a pulsating blue bubble where you inserted it. I have tested this inside of my posts feed, and it looks pretty good.

The advantage of stateless functions is that they are minimal and efficient functions, rendering smaller parts of our application. The approach perfectly integrates with React, and we can improve the code that we have written.