MouseEnter() — react Function Reference

Architecture documentation for the MouseEnter() function in mouse-enter.js from the react codebase.

Function javascript BabelCompiler Optimization calls 1

Entity Profile

BabelCompiler→ Optimization→ MouseEnter() — react Function Reference

Dependency Diagram

graph TD
  1de67a80_6288_c6c7_fac1_11313b3f8a82["MouseEnter()"]
  f6c1c3c1_f884_99e1_f496_a1fbbe6d96a1["mouse-enter.js"]
  1de67a80_6288_c6c7_fac1_11313b3f8a82 -->|defined in| f6c1c3c1_f884_99e1_f496_a1fbbe6d96a1
  71b5c81a_6c35_2de0_6be2_4ff47f948410["render()"]
  1de67a80_6288_c6c7_fac1_11313b3f8a82 -->|calls| 71b5c81a_6c35_2de0_6be2_4ff47f948410
  style 1de67a80_6288_c6c7_fac1_11313b3f8a82 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/mouse-events/mouse-enter.js lines 6–39

const MouseEnter = () => {
  const containerRef = React.useRef();

  React.useEffect(function () {
    const hostEl = containerRef.current;
    ReactDOM.render(<MouseEnterDetect />, hostEl, () => {
      ReactDOM.render(<MouseEnterDetect />, hostEl.childNodes[1]);
    });
  }, []);

  return (
    <TestCase
      title="Mouse Enter"
      description=""
      affectedBrowsers="Chrome, Safari, Firefox">
      <TestCase.Steps>
        <li>Mouse enter the boxes below, from different borders</li>
      </TestCase.Steps>
      <TestCase.ExpectedResult>
        Mouse enter call count should equal to 1; <br />
        Issue{' '}
        <a
          rel="noopener noreferrer"
          target="_blank"
          href="https://github.com/facebook/react/issues/16763">
          #16763
        </a>{' '}
        should not happen.
        <br />
      </TestCase.ExpectedResult>
      <div ref={containerRef} />
    </TestCase>
  );
};