Spitha – A React Component Booster

Home Project Portfolio Project Website Github Repo

Overview

EEG Neural Wearable System Diagram — Figure 1: Example Implementation of Spitha with ChakraUI

Spitha is a performance-enhancing wrapper component for React and Next.js, written in TypeScript. It optimizes component rendering using an internal system of memoization, batched updates, and asynchronous lazy rendering. The component is designed to integrate seamlessly into any modern React project and supports native ChakraUI styling.

Traditional React components tend to re-render unnecessarily, especially in complex UI trees with state-heavy children or repeated API calls. This affects performance in data-intensive applications such as dashboards or graph-based UIs. Spitha was designed to address this bottleneck by intelligently controlling when and how components render and refresh — without requiring manual memoization or architectural overhauls.

Role

Designed and built Spitha in TypeScript from the ground up
Implemented React lifecycle optimizations using `useMemo`, `useCallback`, and threshold-based re-renders
Created the asynchronous render model to fetch API data during visual inactivity
Integrated ChakraUI and ensured style propagation with minimal overhead
Built a custom launch page using Next.js + ChakraUI and acquired 120+ beta users in Buildspace N&W S4

Key Features

Memoization + Callback Retention

To prevent function re-creation across renders, Spitha uses:

const stableCallback = useCallback(() => { ... }, []);

This ensures downstream child components do not re-render unnecessarily due to new references, preserving render time and keeping React’s reconciliation tree shallow.

Asynchronous Lazy Loading

When the user scrolls past a Spitha-wrapped component, it triggers background API fetching using a custom intersection observer and asynchronous logic. This ensures network activity occurs during user inactivity:

if (isOutOfView && !loading) {
  fetchData().then(setData);
}

Batching & Trigger Thresholds

React’s native event batching is extended in Spitha with a `threshold` prop, which defines the scroll distance from the component before re-render is allowed. For instance:

<Spitha threshold={0.4}> <MyComponent /> </Spitha>

This avoids unproductive re-renders from edge-case viewport events.

Framework & Styling Agnostic

Spitha is built to support both raw HTML/CSS and framework-level styling systems like ChakraUI. All `style` and `children` props are passed through without mutation.

Architecture & Implementation

Spitha is architected as a composable performance optimization wrapper in React. It is implemented as a single top-level functional component that leverages internal React hooks to track visibility, throttle fetches, and memoize rendered subtrees. Each responsibility—render suppression, async deferral, style pass-through—is modularized for testability and extensibility.

Hook-Level Breakdown

useIntersectionObserver: tracks whether the component is within the viewport using a reference passed to a DOM node. When visibility is lost, a flag is toggled to queue lazy background fetching.

const observerRef = useRef();
useEffect(() => {
  const observer = new IntersectionObserver(([entry]) => {
    setIsVisible(entry.isIntersecting);
  });
  if (observerRef.current) observer.observe(observerRef.current);
  return () => observer.disconnect();
}, []);

useDebouncedFetch: manages the timing and concurrency of API calls. By ensuring only one fetch per component mount or visibility toggle, it reduces wasted network cycles and CPU idle wait.

const fetchRef = useRef(false);
useEffect(() => {
  if (isVisible && !fetchRef.current) {
    fetchRef.current = true;
    fetchData().then(data => {
      setData(data);
      fetchRef.current = false;
    });
  }
}, [isVisible]);

useStableCallback + useMemo: prevent re-renders triggered by reference identity changes. Callback functions passed into Spitha are retained across state updates via useCallback, and any derived computations (e.g., memoized children) use useMemo to suppress recalculation.
```
const stableCallback = useCallback(() => {
  return fetchData();
}, [fetchData]);

const renderedOutput = useMemo(() => {
  return <MyComponent data={data} />;
}, [data]);
```

useThresholdTrigger: checks if the scroll position relative to the component has crossed a user-defined threshold. If so, and if data is stale, a re-render is scheduled asynchronously.

useEffect(() => {
  const onScroll = () => {
    const rect = ref.current.getBoundingClientRect();
    if (rect.top < window.innerHeight * threshold) {
      setTriggerReady(true);
    }
  };
  window.addEventListener("scroll", onScroll);
  return () => window.removeEventListener("scroll", onScroll);
}, [threshold]);

Render Cycle Optimization

The React reconciliation process compares virtual DOM trees to determine updates. In traditional React apps, prop changes—even non-functional ones—can trigger deep child re-renders. Spitha prevents this through:

Function reference stabilization (via useCallback)
Child tree memoization with dependency-aware guards
Offscreen evaluation of fetchData() to avoid layout thrashing

Additionally, render branches are internally profiled to ensure minimal time between component visibility and paint.

Why This Works

React’s rendering performance is often dictated not just by raw JSX complexity, but by when updates occur. Spitha defers updates until necessary, and ensures fetch logic happens during idle periods. This produces:

Lower visual blocking time as critical path is smaller
Improved cache hit rate due to stable prop references
Minimal thread contention by scheduling render-impacting logic post-paint

Next.js Launch Integration

The launch page for Spitha is written in Next.js using ChakraUI. Spitha components are wrapped around hero images, feature sections, and testimonial tiles. Chakra's system for layout tokens and spacing props ensures style consistency while Spitha ensures update efficiency. This demonstrates real-world compatibility in a marketing-grade UI context.

TypeScript Engineering

Spitha is typed using advanced TypeScript generics to maintain full intellisense and prop inference. The fetch signature is defined as:

type SpithaProps = {
  fetchData: () => Promise<any>;
  initialData?: any[];
  threshold?: number;
  children?: React.ReactNode;
  style?: React.CSSProperties;
}

This allows Spitha to be dropped into any React component tree without additional type configuration.

Style Propagation Engine

To support Chakra, Tailwind, and inline CSS, Spitha passes down all style props and other DOM attributes untouched. This is done by destructuring and forwarding props to the child render tree:

return (
  <div ref={observerRef} style={props.style}>
    {props.children}
  </div>
);

This ensures Spitha is transparent from a visual and developer standpoint—components wrapped by Spitha behave and appear exactly as they would otherwise.

Memory Considerations

Each instance of Spitha retains its own fetch state, observer registration, and memoization boundary. This localizes memory use and ensures GC eligibility when unmounted. React’s fiber architecture guarantees cleanup of all attached effects, keeping Spitha safe for heavy dynamic lists or route transitions.

Performance Testing & Results

Spitha’s performance was rigorously benchmarked using jest within a controlled React environment. The tests compared:

Standard React Components (with raw rendering)
Spitha-wrapped versions of the same components

Test Methodology

To run the tests:

yarn jest

During the tests, rendering times were captured and output as markdown using this snippet:

const markdown = [
  '# Rendering Times for Native Data of Normal Components vs Spitha',
  '| Component | Time (milliseconds) |',
  '|-----------|---------------------|'
];
renderingData.forEach((data) => {
  markdown.push(`| ${data.normalRenderingTime} | ${data.myComponentRenderingTime} |`);
});
fs.writeFileSync('NEW_FILE_NAME.md', markdown.join('\n'));

The results demonstrated a consistent rendering performance improvement of approximately 40% across all benchmarked components.

Challenges

Ensuring reactivity while preventing excessive renders
Debugging async behavior caused by stale closure references
Integrating with ChakraUI’s context while preserving memoization
Creating a generalized threshold logic that didn’t break UX

Future Work

Add Suspense fallback support for smooth async UX
Extend to handle full-page scroll buffering
Create developer metrics for component timing + mount lifecycle
Open-source on npm with installable CLI tooling

Tools Used

TypeScript, React, ChakraUI, Next.js
React Hooks: useCallback, useMemo, useEffect
Chrome Profiler, Lighthouse, Intersection Observer API