Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

`onFocusChange` fires again after each render, also when the focused point does not change

Đang mở
  • Có gì không ổn?
#178 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
68/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
data-visualization, frontend

Hướng nghiên cứu

Start with the focus restoration and callback logic in dist/renderer.js around lines 157–172, then follow how a definition update reaches the renderer. Check whether tests cover repeated renders with an unchanged focused-point key and focus groups. Done means callbacks fire when focus identity changes, but not when a render restores the same focus.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Version: @tanstack/charts 1.0.0, React adapter (@tanstack/charts/react)

Problem

After each render that had a focused point, the renderer calls onFocusChange and onFocusGroupChange again. It does this also when the focused point has the same key as before. The point is a new object each time, because restoreChartFocusPoint returns the point from the new scene.

In dist/renderer.js (about lines 157 to 172):

const nextFocusedPoints = trackedPointer
  ? resolvePointerFocus(...)
  : previousFocusedPoint
    ? (() => {
        const restored = restoreChartFocusPoint(presentedPoints, previousFocusedPoint);
        return restored ? focusPointsForPoint(restored, presentedPoints) : [];
      })()
    : [];
const nextFocusedPoint = nextFocusedPoints[0] ?? null;
...
if (previousFocusedPoint || nextFocusedPoint || previousCursorPresentation) {
  ...
  options.onFocusChange?.(nextFocusedPoint);
  options.onFocusGroupChange?.(nextFocusedPoints);
}

A render occurs when the definition identity changes (definitionChanged in renderer.js, about line 686). In React, a definition that is not memoized, or a memo dependency that changes with the focus, causes a new render.

The usual React pattern is to put the focused point in state. With that pattern, the result is a render loop:

  1. The pointer focuses a point. onFocusChange(point) calls setFocused(point).
  2. React renders again. Something in the definition depends on the focus (for example a highlighted series), so the definition is a new object.
  3. The adapter calls update. The renderer restores the same point as a new object and calls onFocusChange(newObject).
  4. setFocused(newObject) does not bail out, because the object is new. Go to step 2.

Minimal repro

import { useMemo, useState } from 'react';
import { defineChart, lineY, type ChartPoint } from '@tanstack/charts';
import { Chart } from '@tanstack/charts/react';
import { scaleLinear } from '@tanstack/charts/scales/linear';
import { tooltip } from '@tanstack/charts/tooltip';

const rows = [
  { x: 0, y: 1 },
  { x: 1, y: 3 },
  { x: 2, y: 2 },
];

let renders = 0;

export function Repro() {
  const [focused, setFocused] = useState<ChartPoint | null>(null);

  // The definition depends on the focus, which is a normal thing to do.
  const definition = useMemo(
    () =>
      defineChart({
        marks: [
          lineY(rows, {
            x: 'x',
            y: 'y',
            strokeWidth: focused ? 3 : 1,
          }),
        ],
        scales: { x: { scale: scaleLinear }, y: { scale: scaleLinear } },
        tooltip,
      }),
    [focused],
  );

  console.log('render', ++renders);

  return (
    <Chart
      definition={definition}
      ariaLabel="Repro"
      width={400}
      height={200}
      onFocusChange={setFocused}
    />
  );
}

Move the pointer over a point and keep it there.

Expected

onFocusChange fires once when the focused point changes. It does not fire again when a render restores the same point.

Actual

onFocusChange fires after every render with a new point object for the same key. The component renders again and again while the pointer stays on the point.

Our workaround

We store a primitive, so React bails out of the state update:

const handleFocusChange = useCallback((point: ChartPoint | null) => {
  setActiveIndex(point ? point.datumIndex : null);
}, []);

This works, but each consumer must know about it. Nothing in the docs tells you about the risk.

Suggested fix

Call onFocusChange and onFocusGroupChange only when the focus identity changes, for example with sameChartPointIdentity(previousFocusedPoint, nextFocusedPoint) and the same check on each point of the group. If a re-emit on each render is intentional, please document it in the React reference for onFocusChange, next to the memoization guidance from https://github.com/TanStack/charts/pull/111.

Related

Written by an agent (Claude Code, claude-opus-5-5).

Ngôn ngữ chính
TypeScript
Star
769
Fork
47
Merge trung bình
6 giờ 9 phút
Pull request đã merge (30 ngày)
20

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của TanStack/charts

Tất cả issue của TanStack/charts

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.