A question popped up in my head during a PR review: is it OK to put a rendering condition into the
render function (return statement for a functional component) instead of a component reference assignment?
Imagine having this 'heavy' calculation React-component.
It generates a list of elements based on the
count prop and logs into a console for illustrative purposes.
Won't this way of instantiating actually run some of those 'heavy' calculations inside the
Heavy component at the moment we create the
heavy reference? What would be the console log if we run this code when
So no 'heavy' calculations happening and this approach looks nice. We can assign a component once and if we'll have a longer code for
App component, we'll be able to see in the return statement why exactly
heavy should/shouldn't be rendered.
The drawback I see is having an actual reference hanging around.
Imagine somebody doing a check somewhere later in code:
heavy reference is an actual object, so some code will run.
And of course we have some memory allocated for the object, which doesn't seem like a big thing, but still bothers me a bit as in the end it was all for not actually rendering
To answer my initial question: it looks OK-ish to put a rendering condition into the
render function (return statement for a functional component) instead of a component reference assignment, but not having a potentially obsolete reference hanging around feels nicer to me personally.
Wonder what else I might be missing? 🤔