# Avoid re-rendering your components as much as possible when a props and state element changes and this data has no impact on the component's view (`@greenpoint/limit-repaint-and-reflow`)

⚠️ This rule _warns_ in the ✅ `recommended` config.

<!-- end auto-generated rule header -->

## Rule Details

This rule aims to avoid re-rendering your components as much as possible when the modification has no impact on the component's appearance.

## Examples

Examples of **non-compliant** code for this rule:

```js
// fill me in
```

Examples of **compliant** code for this rule:

```js
const Greeting = memo(function Greeting({ name }) {
  console.log("Greeting was rendered at", new Date().toLocaleTimeString());
  return (
    <h3>
      Hello{name && ", "}
      {name}!
    </h3>
  );
});
```

or

```js
class Greeting extends PureComponent {
  render() {
    console.log("Greeting was rendered at", new Date().toLocaleTimeString());
    return (
      <h3>
        Hello{this.props.name && ", "}
        {this.props.name}!
      </h3>
    );
  }
}
```

## Further Reading

- [cnumr/best-practices/Minimize repaints (appearance) and reflows (layout)](https://github.com/cnumr/best-practices/blob/fc5a1f865bafb196e4775cce8835393751d40ed8/chapters/BP_043_en.md#minimize-repaints-appearance-and-reflows-layout)