Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Scan not detecting a render #163

Open
Sushants-Git opened this issue Dec 24, 2024 · 1 comment
Open

React Scan not detecting a render #163

Sushants-Git opened this issue Dec 24, 2024 · 1 comment

Comments

@Sushants-Git
Copy link

output.mp4
function App() {
    const [content, setContent] = useState("foo");

    return (
        <>
            <Contenteditable
                value={content}
                onChange={(updatedContent) => {
                    setContent(updatedContent);
                }}
            />

            <p>{content}</p>
        </>
    );
}
  • In the above code even if the content state changes and both the component <Contenteditable> and <p> get updated, react-scan only glows for <Contenteditable> and not <p> (unexpected), whereas for
function App() {
    const [content, setContent] = useState("foo");

    return (
        <div>
            <Contenteditable
                value={content}
                onChange={(updatedContent) => {
                    setContent(updatedContent);
                }}
            />

            <p>{content}</p>
        </div>
    );
}

( just replaced <> with <div> )

the whole component gets updated (expected)

complete code

import { useState } from "react";
import { useEffect, useRef } from "react";

function App() {
    const [content, setContent] = useState("foo");

    return (
        <>
            <Contenteditable
                value={content}
                onChange={(updatedContent) => {
                    setContent(updatedContent);
                }}
            />

            <p>{content}</p>
        </>
    );
}

function Contenteditable(props) {
    const contentEditableRef = useRef(null);

    useEffect(() => {
        if (contentEditableRef.current.textContent !== props.value) {
            contentEditableRef.current.textContent = props.value;
        }
    });

    return (
        <div
            contentEditable="true"
            ref={contentEditableRef}
            onInput={(event) => {
                props.onChange(event.target.textContent);
            }}
        />
    );
}

is this behavior intentional or is this a bug?

@RobPruzan
Copy link
Collaborator

Thanks for the detailed issue

Seems like an edge case with fragments. I agree this is unexpected behavior and should be fixed. Will update when there's progress on the fix

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants