DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Helder B. Berto
Helder B. Berto

Posted on

๐Ÿ”ฅ Quick Tip: How to create a "PureComponent" as a functional way

On this simple trick, I'll show you how to create a PureComponent as a functional way with React.memo.

// CLASS BASED - OLD WAY
class Button extends React.PureComponent {
  render() {
    const { text } = this.props;
    return (
      <button type="button">{text}</button>
    )
  }
};

// FUNCTIONAL

// With Function
function Button({ text }) {
  return <button type="button">{text}</button>;
};
export default React.memo(Button);

// With Arrow Function
const Button = React.memo(({ text }) => <button type="button">{text}</button>);
export default Button;
Enter fullscreen mode Exit fullscreen mode

Did you like it? Comment, share! โœจ

Latest comments (0)

What image format should you use in your next project? ๐Ÿค”