CODEWITHSUNDEEP
reactjs
Drejer
Drejer

Reputation: 135

React functional/stateless pure component

I'm beginning to switch to functional/stateless components in React, like the one below.

I do however have a problem with react-chartjs-2 re-drawing my charts, even though the data for them didn't change. Before I switched to functional components, this was easily solved by using Reacts PureComponent.

Is there a way to make React use the PureComponent for a stateless function?

const ListGroup = props => {
  const {title, width} = (props);

  return (
    <ul className={"grid"} style={{width}}>
      <h1>{title}</h1>
      {props.children}
    </ul>
  )
}

Upvotes: 2

Views: 1269

Answers (1)

Ori Drori
Ori Drori

Reputation: 191946

Since React v16.6.0 you can use React.memo():

import React from 'react';

const PureListGroup = React.memo(ListGroup);

With React versions before v16.6.0, You can use recompose (discontinued but still maintained) and wrap the component with the pure or onlyUpdateForKeys higher order components:

import pure from 'recompose/pure';

const PureListGroup = pure(ListGroup);

Upvotes: 3

Related Questions