Add conditional rendering logic inside React child ui component or inside parent component

Question

I am using Atomic design to structure my React components.

A certain ui child component (an atom) should be shown or not based on a value (prop).

Is it a better practice to add the conditional rendering inside this child component like:

const Child = ({ show }: Props) => {
  return show ? (
    <span>Foo</span>;
  ) : null
}

or add the conditional rendering part inside the parent component:

{ show && <Child /> }

What is a better practice: Add conditional rendering logic inside React child ui component or inside parent component?

Konrad Przydział · Accepted Answer · 2023-01-31 08:39:27Z

0

Everything depends on what you want to achieve. Basically there is no significant difference between these two ways of conditional rendering when it comes to performance or something.

The question is: do you want to conditionaly render Child at all or make Child configurable and control span rendering inside it? It's more like architectural/design decision than code quality or good practice problem.

Anyway... There is no one golden rule. It depends on what you need in your project.

answered Jan 31, 2023 at 8:39

Konrad Przydział

2962 silver badges12 bronze badges

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

Comments

Nitin Daphale · Accepted Answer · 2023-02-02 10:02:19Z

0

Second approach is better since it would be readable code and also avoids rendering the Child component in case 'show' is falsy.

answered Feb 2, 2023 at 10:02

Nitin Daphale

114 bronze badges

Collectives™ on Stack Overflow

Add conditional rendering logic inside React child ui component or inside parent component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related