Spitha

React just got

A React Component that renders React components Quicker while handing Infinite Rendering





<div>
    <WelcomeComponent> Welcome to Spitha!</WelcomeComponent>
    <Text>React just got Faster!!!</Text>
    <h1>{`Test Component ${i + 1}`}</h1>
    <a href={`https://example.com/${i + 1}`}>Visit Test Component made with{i + 1}</a>
    <img src="image.jpg" alt="Image" />;
</div>


import { Text } from "@chakra-ui/react";
import { Spitha } from "spitha";

export default function Home() {
return (
    <div>
    <Spitha fetchData={() => Promise.resolve()}>
        <div>
        <Text fontSize='6xl'>React just got faster!!!</Text>
        <Text>Yayyyyyyyyyy</Text>
        </div>
    </Spitha>
    </div>
);
}

$ yarn add spitha

$ npm i spitha

A Component Booster

Spitha is a native Typescript React Component that renders native data and components (both custom and external) over 40% faster than native components. Although you won't see anything on the frontend, it does most of its work in the backend.

With improved batching techniques, Queue structure, Memoized structure, and Lazy Loading techniques, Spitha is able to load data sigificantly quicker. Spitha is serves as a drastic improvement for components that render heavy API data or large visuals like graphs.

Average Render Time on Next.js

React Component

0.03375* ms on avg

Spitha

0.01638* ms on avg

Average Component Render

Average Number of Renders per Component Upon Scrolling post React 16

3 Renders on avg *

React Component

1 Render on avg *

Spitha Component

Improved Infinite Render Handling

Async State Management: Spitha has improved State Management where it verifies if API data is already fetched or not. It fetches once per render unless stated otherwise with the fetchData prop. This means that while the user may call the API fetch multiple times on React, Spitha will run it only once. However, to ensure the data rendered is up-to-date, Spitha runs an Asynchronous Loading protocol that calls APIs when the component is not seen by the viewer. This allows the component to dynamically load more data as the user scrolls down the page looking at other components.

Callback Memoization: Memoization in Spitha ensures that the same callback instance is reused across renders preventing unnecessary re-creation of the function. By memoizing the callback, the component avoids unnecessary re-renders caused by changes in the callback's reference improving performance.

Dynamic Threshold: Spitha can be configured to trigger the loading indicator when the user if at varying distances from the end of the content. For example, setting a threshold of 0.8 would trigger the loading indicator when the user has scrolled to within 80% of the content's height.

<Spitha> <h1> I love Spitha <3 </h1> </Spitha>

Jaival Patel (www.jaivalpatel.com) @ 2024 ❤️