mirror of
https://github.com/oxc-project/oxc.git
synced 2026-09-14 19:36:11 +08:00
Boshen
dec0a86412
Standardize React Compiler diagnostics with concise titles, primary labels, actionable help, notes, structured categories, and official guidance links. Preserve React guidance when diagnostics are surfaced through Oxlint, and refresh affected snapshots. AI-assisted; reviewed and validated by the contributor.
63 lines
1.8 KiB
Plaintext
63 lines
1.8 KiB
Plaintext
---
|
|
source: crates/oxc_react_compiler/tests/snapshot.rs
|
|
input_file: crates/oxc_react_compiler/fixtures/allow-ref-access-in-effect.js
|
|
---
|
|
Diagnostics:
|
|
|
|
OxcDiagnostic { inner: OxcDiagnosticInner { message: "Cannot access refs during render", labels: [LabeledSpan { label: Some("Cannot access ref value during render"), span: Span { start: 628, end: 639 }, primary: true }], help: Some("React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected"), note: Some("React Compiler skipped optimizing this component or hook"), severity: Error, code: OxcCode { scope: Some("react-compiler"), number: Some("Refs") }, url: Some("https://react.dev/reference/eslint-plugin-react-hooks/lints/refs") } }
|
|
|
|
import { c as _c } from "react/compiler-runtime";
|
|
// @validateRefAccessDuringRender
|
|
import { useEffect, useRef, useState } from "react";
|
|
function Component() {
|
|
const $ = _c(6);
|
|
const ref = useRef(null);
|
|
const [state, setState] = useState(false);
|
|
let t0;
|
|
let t1;
|
|
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
|
|
t0 = () => {
|
|
ref.current = "Ok";
|
|
};
|
|
t1 = [];
|
|
$[0] = t0;
|
|
$[1] = t1;
|
|
} else {
|
|
t0 = $[0];
|
|
t1 = $[1];
|
|
}
|
|
useEffect(t0, t1);
|
|
let t2;
|
|
let t3;
|
|
if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
|
|
t2 = () => {
|
|
setState(true);
|
|
};
|
|
t3 = [];
|
|
$[2] = t2;
|
|
$[3] = t3;
|
|
} else {
|
|
t2 = $[2];
|
|
t3 = $[3];
|
|
}
|
|
useEffect(t2, t3);
|
|
const t4 = String(state);
|
|
let t5;
|
|
if ($[4] !== t4) {
|
|
t5 = <Child key={t4} ref={ref} />;
|
|
$[4] = t4;
|
|
$[5] = t5;
|
|
} else {
|
|
t5 = $[5];
|
|
}
|
|
return t5;
|
|
}
|
|
function Child({ ref }) {
|
|
"use no memo";
|
|
return ref.current;
|
|
}
|
|
export const FIXTURE_ENTRYPOINT = {
|
|
fn: Component,
|
|
params: [{}]
|
|
};
|