react Architecture Docs
Home / File/ IntersectionObserverCase.js — react Source File

IntersectionObserverCase.js — react Source File

Architecture documentation for IntersectionObserverCase.js, a javascript file in the react codebase. 5 imports, 1 dependents.

File javascript BabelCompiler Entrypoint 5 imports 1 dependents 3 functions

Entity Profile

Dependency Diagram

graph LR
  e6ade876_ee26_9239_190e_a16f84c0b9f9["IntersectionObserverCase.js"]
  14dde3c9_48ef_6e34_3667_978d06aff15d["TestCase.js"]
  e6ade876_ee26_9239_190e_a16f84c0b9f9 --> 14dde3c9_48ef_6e34_3667_978d06aff15d
  e1e356f5_b085_dad5_a81f_4b4844381311["TestCase"]
  e6ade876_ee26_9239_190e_a16f84c0b9f9 --> e1e356f5_b085_dad5_a81f_4b4844381311
  bc8ae172_cc20_3692_943c_bbdb1ad34855["Fixture.js"]
  e6ade876_ee26_9239_190e_a16f84c0b9f9 --> bc8ae172_cc20_3692_943c_bbdb1ad34855
  2851624d_a736_f3f6_2132_5a20630983fe["Fixture"]
  e6ade876_ee26_9239_190e_a16f84c0b9f9 --> 2851624d_a736_f3f6_2132_5a20630983fe
  a3aeab4c_4f93_b8d8_01c2_7a351a28a3fb["Fixture"]
  e6ade876_ee26_9239_190e_a16f84c0b9f9 --> a3aeab4c_4f93_b8d8_01c2_7a351a28a3fb
  463c662d_adfd_912e_a87b_b390bc35e100["index.js"]
  463c662d_adfd_912e_a87b_b390bc35e100 --> e6ade876_ee26_9239_190e_a16f84c0b9f9
  style e6ade876_ee26_9239_190e_a16f84c0b9f9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import TestCase from '../../TestCase';
import Fixture from '../../Fixture';

const React = window.React;
const {Fragment, useEffect, useRef, useState} = React;

function WrapperComponent(props) {
  return props.children;
}

function ObservedChild({id}) {
  return (
    <div id={id} className="observable-card">
      {id}
    </div>
  );
}

const initialItems = [
  ['A', false],
  ['B', false],
  ['C', false],
];

export default function IntersectionObserverCase() {
  const fragmentRef = useRef(null);
  const [items, setItems] = useState(initialItems);
  const addedItems = items.slice(3);
  const anyOnScreen = items.some(([, onScreen]) => onScreen);
  const observerRef = useRef(null);

  useEffect(() => {
    if (observerRef.current === null) {
      observerRef.current = new IntersectionObserver(
        entries => {
          setItems(prev => {
            const newItems = [...prev];
            entries.forEach(entry => {
              const index = newItems.findIndex(
                ([id]) => id === entry.target.id
              );
              newItems[index] = [entry.target.id, entry.isIntersecting];
            });
            return newItems;
          });
        },
        {
          threshold: [0.5],
        }
      );
    }
    fragmentRef.current.observeUsing(observerRef.current);

    const lastFragmentRefValue = fragmentRef.current;
    return () => {
      lastFragmentRefValue.unobserveUsing(observerRef.current);
      observerRef.current = null;
    };
  }, []);

// ... (96 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does IntersectionObserverCase.js do?
IntersectionObserverCase.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Entrypoint subdomain.
What functions are defined in IntersectionObserverCase.js?
IntersectionObserverCase.js defines 3 function(s): IntersectionObserverCase, ObservedChild, WrapperComponent.
What does IntersectionObserverCase.js depend on?
IntersectionObserverCase.js imports 5 module(s): Fixture, Fixture, Fixture.js, TestCase, TestCase.js.
What files import IntersectionObserverCase.js?
IntersectionObserverCase.js is imported by 1 file(s): index.js.
Where is IntersectionObserverCase.js in the architecture?
IntersectionObserverCase.js is located at fixtures/dom/src/components/fixtures/fragment-refs/IntersectionObserverCase.js (domain: BabelCompiler, subdomain: Entrypoint, directory: fixtures/dom/src/components/fixtures/fragment-refs).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free