I have a React component that manages a list of loaders with a rate limit. Loaders can be in one of three states: pending, active, or completed. When a loader completes its animation, the next pending loader should start animating.

I'm seeing a strange behavior:

When I use a centralized rendering function (getLoaders), everything works as expected.

When I split the rendering logic into separate functions (getCompletedLoadersJSX, getActiveLoaderJSX, and getPendingLoaderJSX), only the first loader animates correctly. The remaining loaders jump to 100% without animating.

Below is the link of the code

Centralized Rendering (getLoaders - Working):

const getLoaders = () => {
  return Array.from({ length: loaderCount }).map((_, index) => {
    if (completedLoaders.includes(index)) {
      return <Loader key={index} percentLoaded={100} animate={false} />;
    } else if (activeLoaders.includes(index)) {
      return (
        <Loader
          key={index}
          percentLoaded={100}
          animate={true}
          onAnimationEnd={() => handleAnimationEnd(index)}
        />
      );
    } else {
      return <Loader key={index} percentLoaded={0} animate={false} />;
    }
  });
};

Split Rendering (Not Working):

const getCompletedLoadersJSX = () => {
  return completedLoaders.map((loaderId) => (
    <Loader key={loaderId} percentLoaded={100} animate={false} />
  ));
};

const getActiveLoaderJSX = () => {
  return activeLoaders.map((loaderId) => (
    <Loader
      key={loaderId}
      percentLoaded={100}
      animate={true}
      onAnimationEnd={() => handleAnimationEnd(loaderId)}
    />
  ));
};

const getPendingLoaderJSX = () => {
  return pendingLoaders.map((loaderId) => (
    <Loader key={loaderId} percentLoaded={0} animate={false} />
  ));
};

I have added 2 comments in App.tsx inside the return statement. Please uncomment the working part to see the expected behaviour, and uncomment the not working part to see the issue

Expected Behavior: Each loader should animate one after the other, in batch or rate limit.

Actual Behavior:

1. With split rendering, only the first loader animates. The rest jump to 100% without animating.
2. With centralized rendering (getLoaders), everything works as expected.

Please explain to me way its not working properly? And how to fix it. Please ask me for any more clerification if needed. Please view the code link I have shared

I have a React component that manages a list of loaders with a rate limit. Loaders can be in one of three states: pending, active, or completed. When a loader completes its animation, the next pending loader should start animating.

I'm seeing a strange behavior:

When I use a centralized rendering function (getLoaders), everything works as expected.

When I split the rendering logic into separate functions (getCompletedLoadersJSX, getActiveLoaderJSX, and getPendingLoaderJSX), only the first loader animates correctly. The remaining loaders jump to 100% without animating.

Below is the link of the code https://codesandbox.io/p/sandbox/4f4zdr

Centralized Rendering (getLoaders - Working):

const getLoaders = () => {
  return Array.from({ length: loaderCount }).map((_, index) => {
    if (completedLoaders.includes(index)) {
      return <Loader key={index} percentLoaded={100} animate={false} />;
    } else if (activeLoaders.includes(index)) {
      return (
        <Loader
          key={index}
          percentLoaded={100}
          animate={true}
          onAnimationEnd={() => handleAnimationEnd(index)}
        />
      );
    } else {
      return <Loader key={index} percentLoaded={0} animate={false} />;
    }
  });
};

Split Rendering (Not Working):

const getCompletedLoadersJSX = () => {
  return completedLoaders.map((loaderId) => (
    <Loader key={loaderId} percentLoaded={100} animate={false} />
  ));
};

const getActiveLoaderJSX = () => {
  return activeLoaders.map((loaderId) => (
    <Loader
      key={loaderId}
      percentLoaded={100}
      animate={true}
      onAnimationEnd={() => handleAnimationEnd(loaderId)}
    />
  ));
};

const getPendingLoaderJSX = () => {
  return pendingLoaders.map((loaderId) => (
    <Loader key={loaderId} percentLoaded={0} animate={false} />
  ));
};

I have added 2 comments in App.tsx inside the return statement. Please uncomment the working part to see the expected behaviour, and uncomment the not working part to see the issue

Expected Behavior: Each loader should animate one after the other, in batch or rate limit.

Actual Behavior:

1. With split rendering, only the first loader animates. The rest jump to 100% without animating.
2. With centralized rendering (getLoaders), everything works as expected.

Please explain to me way its not working properly? And how to fix it. Please ask me for any more clerification if needed. Please view the code link I have shared

• javascript
• html
• css
• reactjs
• frontend

Share Improve this question Follow edited Mar 3 at 17:13 vishal patel asked Mar 3 at 17:01 vishal patelvishal patel 19322 silver badges1111 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The issue you're encountering is related to how React handles rendering and state updates when you split the rendering logic into separate functions. When you use separate functions to render the loaders, React may not correctly reconcile the components, leading to unexpected behavior such as loaders jumping to 100% without animating.

Explanation:

Centralized Rendering (getLoaders):

In this approach, you render all loaders in a single function. React can efficiently reconcile the components because it has a complete picture of the component tree in one place.

This ensures that the state transitions (pending → active → completed) are handled correctly, and the animations work as expected.

Split Rendering (getCompletedLoadersJSX, getActiveLoaderJSX, getPendingLoaderJSX):

When you split the rendering logic, React may not correctly track the state transitions of individual loaders. This can lead to issues where the components are not updated as expected.

Specifically, when a loader completes its animation, React might not correctly re-render the next pending loader to start its animation, causing it to jump to 100% immediately.

Solution:

To fix this issue, you should ensure that React can correctly reconcile the components by maintaining a single source of truth for the rendering logic. One way to achieve this is by using a single function to render all loaders, but you can still modularize your code by breaking down the logic within that function.

Here’s how you can refactor your code:

const getLoaders = () => {
  return Array.from({ length: loaderCount }).map((_, index) => {
    if (completedLoaders.includes(index)) {
      return <Loader key={index} percentLoaded={100} animate={false} />;
    } else if (activeLoaders.includes(index)) {
      return (
        <Loader
          key={index}
          percentLoaded={100}
          animate={true}
          onAnimationEnd={() => handleAnimationEnd(index)}
        />
      );
    } else {
      return <Loader key={index} percentLoaded={0} animate={false} />;
    }
  });
};

// In your render method
return (
  <div>
    {getLoaders()}
  </div>
);

Alternative Approach

If you prefer to keep the rendering logic split into separate functions for readability, you can still do so by ensuring that the components are rendered in a way that React can correctly reconcile them. One way to achieve this is by using a single array to store all the loaders and then rendering them in one go:

const getLoaders = () => {
  const loaders = [];

  completedLoaders.forEach((loaderId) => {
    loaders.push(
      <Loader key={loaderId} percentLoaded={100} animate={false} />
    );
  });

  activeLoaders.forEach((loaderId) => {
    loaders.push(
      <Loader
        key={loaderId}
        percentLoaded={100}
        animate={true}
        onAnimationEnd={() => handleAnimationEnd(loaderId)}
      />
    );
  });

  pendingLoaders.forEach((loaderId) => {
    loaders.push(
      <Loader key={loaderId} percentLoaded={0} animate={false} />
    );
  });

  return loaders;
};

// In your render method
return (
  <div>
    {getLoaders()}
  </div>
);