-1

I am relatively new to React, and still have not full familiarity with this thing to re-render components every time a state changes. I understand that re-renders make declarative components possible, but in terms of performance it seems less than optimal, and I have trouble determining when component re-render is to be avoided.

Let's say I have a render-costly component RenderCostlyComponent with a loading state that applies a class to it to show loading is in progress.

function RenderCostlyComponent(props) {

    const [loading, setLoading] = useState(true);
    const [componentData, setComponentData] = useState({});

    //Data retrieval or calculation and store in 'componentData' data state

    return (
        <div className={loading ? 'loadingClass' : ''}>
            {/*Comoponent layout here*/}
        </div>
    );

}

In this case, just to change a class (or in other cases where minimal changes are applied), the component needs to re-render. Surely no data has changed so React won't rebuild the heavy DOM parts, especially if we've been using memoization related hooks.

But is this approach practical and production ready or this should be considered a bad practice?

Improve this question
5
  • 1
    I read it a few times but I'm not quite sure what the question is. Do you ask if it's better to use props or state? Commented Apr 10, 2024 at 18:13
  • 3
    This looks like quite standard react code. If you want to change the class on the div, then setting state and thus rerendering the component is the correct thing to do. If you're having performance problems, they must be in the /* Component layout here */ section. We'd need more details in order to recommend how to optimize that code. Commented Apr 10, 2024 at 18:16
  • @NicholasTower: No I have not performance problems, I only need to understand if this is the way to do it, you answered "is the correct thing to do". Thank you. Commented Apr 10, 2024 at 18:24
  • 1
    @Konrad: The question is if allowing re-rendering is fine just to change a minimal layout detail. Commented Apr 10, 2024 at 18:26
  • Perhaps your code example is too trivial to express what issue or concern you have with what seems to be very specific and expensive code on your end. Can you edit to narrow the focus of the post and include a more complete and representative minimal reproducible example of the code you are actually working with? Commented Apr 11, 2024 at 5:29

2 Answers 2

Reset to default
1

Although the question is a bit unclear but react re-rendering process is quite a powerful feature and in most cases its impact on performance is negligible.However, if you want to optimise the code more consider:

  1. Use React.memo which is a Higher order component to make a pure component in react.
  2. Use useMemo and useCallback hooks that will help in memoizing the values of js functions.

React process of reconciliation is very efficient therefore re-rendering is practical and production ready approach.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

There is a concept of component trees. If you have a container which renders based on a state and you have a heavy content which you do not want react to visit each time your container rerenders, you can use children prop on container component.

const Container = () => {
  const [state, setState] = useState()

  return <div>{children}</div>
}

const SomeHeavyComponent = () => {}

const Page = () => {
  return <Container><SomeHeavyComponent /></Container>
}

This way the app won't visit when the state in Container changes.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.