DEV Community

sk161
sk161

Posted on

Remounting Issue with State Change in a Custom React Grid Component

Issue:

I'm encountering a full remounting (useEffect without parameters) issue with my custom React grid component when the state changes. This problem occurs in two scenarios:

When the template is declared as a nested React component within the grid.
When the template is declared as a React component outside of the grid.

According to React's behaviour, in the first case, the component should remount for each state update, while in the second case, it should not remount. However, in my custom component, the first case functions correctly, but the second case experiences remounting issues when there's a state update to the template.

Template Implementation:

To implement the templates, I've created a wrapper React grid class component. Inside this component, multiple functional templates are rendered as portals using a separate JavaScript function with custom data. These portals are then returned as multiple elements to React from the class component.

Suggestions Needed:

I kindly request your suggestions on how to prevent full remounting (useEffect without parameters) of the template when there are state updates.

Top comments (0)