No Inline Property On Memo Component

Error

small-rules/no-inline-property-on-memo-component

Prevent inline properties from being passed to memoized components.

Diagnostic Messages

inlineProperty

Inline {{type}} passed to memoized component "{{name}}" — new references cause unnecessary re-renders

This rule does not accept options.

{
  "jsPlugins": [
    "@pobammer-ts/small-rules"
  ],
  "rules": {
    "small-rules/no-inline-property-on-memo-component": "error"
  }
}

Inline object prop on memo

import { memo } from "@rbxts/react";

const MemoCard = memo(() => <div />);

const view = <MemoCard options={{ enabled: true }} />;

Regular component property

import { memo } from "@rbxts/react";

function Card() {
  return <div />;
}

const view = <Card options={{ enabled: true }} />;