No Pass Data to Parent

Suggestion

small-rules/no-pass-data-to-parent

Disallow passing data to parents in an effect.

Rationale

Ported from eslint-plugin-react-you-might-not-need-an-effect/no-pass-data-to-parent. The upstream rule points at the “Passing data to the parent” section of the React docs, so that’s where the intent comes from.

This flags an effect that calls a parent callback with an argument that’s none of the usual suspects: not state, not a prop, not a ref, not a constant. The rule literally identifies data by process of elimination. What you’ve built is two-way data flow, and the parent can’t act on it until the child renders, the effect runs, and the callback fires. Always a render late.

Fetch or compute in the parent and pass the result down, or return it from a hook. On Roblox the parent is usually a screen controller that should own the data anyway.

Diagnostic Messages

avoidPassingDataToParentInComponent

Avoid passing data to parents in an effect. Instead, fetch "{{data}}" in the parent and pass it down to {{name}} as a prop.

avoidPassingDataToParentInHook

Avoid passing data to parents in an effect. Instead, return "{{data}}" from {{name}}.

Configuration

This rule accepts one options object after the severity.

environmentOptional

The React environment: 'roblox-ts' uses @rbxts/react, 'standard' uses react.

Type

"roblox-ts" | "standard"

Default

roblox-ts

{
  "jsPlugins": [
    "@pobammer-ts/small-rules"
  ],
  "rules": {
    "small-rules/no-pass-data-to-parent": [
      "error",
      {
        "environment": "roblox-ts"
      }
    ]
  }
}

Examples

Effect passes fetched data to a parent

import React, { useEffect } from "@rbxts/react";

declare function useSomeAPI(): string;

export function Child({ onFetched }: { onFetched: (data: string) => void }): React.Element {
  const data = useSomeAPI();

  useEffect(() => {
    onFetched(data);
  }, [onFetched, data]);

  return <textlabel Text={data} />;
}

Parent owns the data

import React from "@rbxts/react";

declare function useSomeAPI(): string;

function Child({ data }: { data: string }): React.Element {
  return <textlabel Text={data} />;
}

export function Parent(): React.Element {
  const data = useSomeAPI();

  return <Child data={data} />;
}

Related Rules

No Useless Use EffectOverlapsThis focused rule overlaps no-useless-use-effect's notifyParent check. Enable one to avoid duplicate diagnostics.