Stateless components are candidates for optimization in the future and the docs hint at it without going into details:
In an ideal world, most of your components would be stateless functions because in the future we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations. This is the recommended pattern, when possible.
Currently however, stateless components do not optimize performance by skipping the render process if the props are unchanged. This has been confirmed by a member of the react team:
For complex components, defining
shouldComponentUpdate(eg. pure render) will generally exceed the performance benefits of stateless components. The sentences in the docs are hinting at some future optimizations that we have planned, whereby we won't allocate an internal instance for stateless functional components (we will just call the function). We also might not keep holding the props, etc. Tiny optimizations. We don't talk about the details in the docs because the optimizations aren't actually implemented yet (stateless components open the doors to these optimizations).
There are discussions about having a
pureRenderflag that you could set on the function, or allowing it to participate in the shouldUpdate lifecycle, but that's currently not implemented. At the moment, stateless functions can not be pure-render.
It is worth keeping in mind that sometimes people abuse/overuse pure-render; it can sometimes be as or more expensive than running the render again, because you're iterating over the array of props and potentially doing things like string compares, which is just extra work for components that ultimately return true and then proceed to rerender anyway. PureRender /
shouldComponentUpdatereally is considered an escape hatch for performance and is not necessarily something that should be blindly applied to every component.
My takeaway from this discussion is that in certain cases for complex components, the performance can be increased by implementing
shouldComponentUpdate in comparison to stateless components. On the other hand, I would strongly consider whether the performance benefits are significant enough to outweigh the added complexity and bigger footprint of the component.
- React optimization of stateless, functional components through shouldComponentUpdate
- If-else in React Stateless functional components
- React stateless functional components and component lifecycle
- Typescript - React 0.14 stateless functional components
- React stateless functional components defaultProps function
- React Stateless Functional Components - Laravel
- Fontawesome icons not accepting color props through react functional components via tailwindcss
- React - passing props up components tree through functional components
- When to use ES6 class based React components vs. functional ES6 React components?
- React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
- How to use children with React Stateless Functional Component in TypeScript?
- Event Handlers in React Stateless Components
- Do I need to import React for stateless functional components?
- Should we use useCallback in every function handler in React Functional Components
- React functional components vs classical components
- React Navigation Header in Functional Components with Hooks
- using mobx with react functional components and without decorators
- Helpers in stateless functional components
- React hooks: How to write variables in functional components that in class components were initialized in the constructor
- React URI params in functional components
- How will React 0.14's Stateless Components offer performance improvements without shouldComponentUpdate?
- Can a React portal be used in a Stateless Functional Component (SFC)?
- React Native - Animated Functional Components
- Forms as functional components with react
- What is the Flow return type of a React stateless functional component?
- HOC's and Render Props With Functional Components in React 16
- React functional components with methods
- What is the difference between arrow functions and regular functions inside React functional components (no longer using class components)?
- Arrow function syntax in React stateless components
- How to test inner functions defined on Stateless Components in React with Enzyme
More Query from same tag
- React app gets 404 when fetching url with params
- Getting input value in Redux
- How to generate a menu based on the files in the pages directory in Next.js
- Can't call setState (or forceUpdate) on an unmounted component
- my onChange event is not working on input elements
- Why am I not getting data from the reducer when I click on a button?
- Customize style of component in react bootstrap
- React Syntax in Tutorial Valid or invalid?
- React npm start doesn't work after installing react-router-dom
- Single-page ReactJS app using both server-side and client-side rendering?
- React Router - Content Security Policy directive: "default-src 'self'
- Binding element 'title' implicitly has an 'any' type
- Can't get React Router to work with this simple example
- asserting against thrown error objects in jest
- React-native define component height with flexbox
- With useEffect, how can I skip applying an effect upon the initial render?
- Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-core'
- How to use axios and get JSON data
- Socket.io , NodeJS and ReactJS CORS error
- Redirect react-router-dom v6
- How to split CSS of a single element into multiple functions/variables in styled-components?
- TypeError: Cannot read property 'GlobalWorkerOptions' of undefined in PDFJS.GlobalWorkerOptions.workerSrc when using React js
- Create React App Server Side Rendering SCSS Webpack Error
- Render nextjs page using layout - has already been declared error
- Work around onClick event being fired twice on "Enter Key" press in material-ui (bug)
- Get same effect as ...StyleSheet.absoluteFillObject without taking up more height
- Why can't I customize classes for an element that is disabled in Material-UI?
- React.js Prevent Scrolling to top after re-rendering
- Redux - how to update an item in an array
- How to URL-encode ParsedUrlQuery?