Drejer Drejer - 10 days ago 6
React JSX Question

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>
)
}

Answer

You can use recompose and wrap the component with the pure or onlyUpdateForKeys higher order components:

import pure from 'recompose/pure';

const PureListGroup = pure(ListGroup);