MOCKSTACKS
EN
Questions And Answers

More Tutorials









React Hello World with Stateless Functions


Stateless components are getting their philosophy from functional programming. Which implies that: A function returns all time the same thing exactly on what is given to it.

For example:


const statelessSum = (a, b) => a + b;
let a = 0;
const statefulSum = () => a++;

As you can see from the above example that, statelessSum is always will return the same values given a and b. However, statefulSum function will not return the same values given even no parameters. This type of function's behaviour is also called as a side- fect. Since, the component affects somethings beyond.

So, it is advised to use stateless components more often, since they are side-effect free and will create the same behaviour always. That is what you want to be after in your apps because fluctuating state is the worst case scenario for a maintainable program.

The most basic type of react component is one without state. React components that are pure functions of their props and do not require any internal state management can be written as simple JavaScript functions. These are said to be Stateless Functional Components because they are a function only of props, without having any state to keep track of.

Here is a simple example to illustrate the concept of a Stateless Functional Component:

// In HTML
<div id="element"></div>
// In React
const MyComponent = props => {
 return <h1>Hello, {props.name}!</h1>;
};
ReactDOM.render(<MyComponent name="Arun" />, element);
// Will render <h1>Hello, Arun!</h1>

Note that all that this component does is render an h1 element containing the name prop. This component doesn't keep track of any state. Here's an ES6 example as well:

import React from 'react'
const HelloWorld = props => (
 <h1>Hello, {props.name}!</h1>
HelloWorld.propTypes = {
 name: React.PropTypes.string.isRequired
}
export default HelloWorld

Since these components do not require a backing instance to manage the state, React has more room for optimizations. The implementation is clean, but as of yet no such optimizations for stateless components have been implemented.

Conclusion

In this page (written and validated by ) you learned about React Hello World with Stateless Functions . What's Next? If you are interested in completing React tutorial, your next topic will be learning about: React Absolute Basics of Creating Reusable Components.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.