score:3
Accepted answer
First, stateless function components renders faster, as there's an optimized short-path for them in React rendering pipeline.
Second, the code is much cleaner, since you're typing less and there are almost no visual noise. If you use modern JS, of course. Check it out, I'm defining some "custom tag":
const MyFancyDiv = ({ children, ...otherProps }) => (
<div { ...otherProps } className='i-am-fancy-wrapper'>
{ children }
</div>
);
For everything which doesn't have a state, context, or custom lifecycle methods this is the preferred way.
And it's actually the feature of React which makes it very hard to beat for any other framework. Use it when you can.
Source: stackoverflow.com
Related Query
- What are the advantages of 'Stateless Function Components' over 'ES6 Class Components'?
- What are the differences between plain es6 class and extend React.Component
- In React, what are the advantages of setState() over render()?
- what is the benefit of using styled components over using css class for the components
- React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
- Call a static function into the class React ES6
- What is the benefit of using styled components over css modules in Reactjs
- Class based component vs Functional components what is the difference ( Reactjs )
- What are the advantages of putting data inside a "payload" key in a Redux action?
- What is the difference between arrow functions and regular functions inside React functional components (no longer using class components)?
- ES6 React - What are the difference between reference, shallow copy and deep copy and how to compare them?
- Reactjs: Are there advantages to using React components over normal functions?
- What are the advantages of useRef() instead of just declaring a variable?
- What are the benefits of using thunk middleware in redux over using regular functions as async action creators?
- What are the benefits of using react-router over kadira:flow-router for meteor
- AG-Grid React, trouble getting custom cell renderer to update when data changes. Function components are behaving differently than class components
- Are functional components turned into class components under the hood?
- What are the UI components for ImageSlider in React-Native
- What are the advantages for using useRef or createRef rather than inline ref?
- Is there a non-hook alternative for the React Material-UI makeStyles() function that works for class Components
- What is the difference between Props in Class and functional components in ReactJs?
- Why does ReactDOM.render need to call function or class components again after creating the virtual DOM?
- what is the equivalent of this.props.history.push('/some_route') of react class components in hooks?
- In React, what is the proper way of injecting shared state into components that are not in a parent-child relationship?
- react function component inside class component, is a valid component ? What is the difference?
- What is the right way for removing timers in React. When they are created after onClick function is executed
- What are the advantages or disadvantages of putting our items in an empty div in React?
- What is the best way to call an external function on the DOM element rendered by a React stateless component?
- What is the equal code for OnChange on React Class Component , on React Function Component
- State is not updating from a function when the components are inside an array
More Query from same tag
- How to pass state in React from index.js to child elements without using Redux?
- React detailslist is always empty
- How to call function from the constructor of a JS class
- "left side of comma operator.." error in html content of render
- React dynamically add html element with event handler
- ReactNative/Expo Error, Element type is invalid?
- ReactJS many tables from one data array/json/request from DB
- Child object of variable in state does not display
- REACT JS: Dynamically convert part of paragraph into an anchor tag and on click of that anchor tag do an API call before doing a redirect
- GraphQL post request in axios
- How to add text box in Microsoft webchat smart display sample?
- How to scroll to top by default using React Router V5?
- How to get checkbox/radio being checked with given dynamic id in React Router
- If I return jsx of a Component from some method and call that method in another component's render, then is a new object created on every render?
- Have to render a react component based on props that changes a js variable
- Two sets of React propTypes
- componentWillReceiveProps render multiple times
- How to apply opacity to KML layer on top of Google Maps in the React framework?
- Print an HTML tag from a string in an array using React
- Why is my state array variable being treated as "pass-by-reference" and mutated when I use it as a parameter to another function?
- Scrolling does not work after redirect in reactstrap
- React Re-render on State Change
- The argument must be a React element, but you passed undefined
- Conceptual problem in pushing an object in an array
- Insert a new instance of a component onClick outside DOM hierarchy of the parent component
- Rendered Value of Text Field does not change if attribute of the object changes
- Why do I have to manually refresh the page for the component to load when using react-router?
- How to add an element in the your index inside a array? ReactJs
- What is the proper way of communicating between components in react? Why not using refs everywhere?
- How can I render a component X amount of times based on a javascript object in React?