Rendering React Components Conditionally

Different methods for deciding which, of several components, to render, based on a value.

#shorts

[matthew]

I've never done it this way. Nice suggestion Jack!

[pim]

Wow, Jack! the content you create is, in my case, many times, the bridge where I can take a look at a React's principal reasoning and good practices learned over many years of experience... Thank you so much!

[artemu]

1 minutes packed advices! i like it, very useful and motivating

[faizanahmed]

amazing sir! thank you for this suggestion

[koi]

and al revolves around everything being an object ~ awesome!

[codewar]

I am using this method from last 2 year.

[Abhi-owxe]

Thanks!! this is new way to render components.

[nielskersic]

I'm loving these shorts! One note though is that the subtitles are a bit too low and get hidden by YouTube's UI

[hitbox]

That right there was the moment when I started to build stuff exclusively in classes. Sometimes overkill, but as a practice the most useful thing in OOP-languages. Realizing that functions are basically algorithmic variables is the single most groundbreaking thing that happened to me while learning js/python.

[ag]

I love your videos man. Just found your channel and as a senior react developer for a few years I still get some nice advice from you. Keep up the good work.

[theyreMineralsMarie]

I would also wrap it in a useMemo, just to make sure only the related values are what controls the render.

[Retro.one]

Also, functions in a react component will rerun on each rerender. It's better to just set them as a const instead.

[ste-fa-no]

Video quality, pacing, code animation, format, design: amazing short!
The only thing that bothers me is YT interface on top of it. I don't know if it changes, but in many apps (FB, IG, TT) it's hard to see anything in le bottom left corner, so it's difficult to have your subtitles (or face) not covered by their UI. They all need a minimal UI version.

[pranupranav]

I was using conditional operator if else in next js. Due to ssr hydration was different than csr hydration. Hence it thrown error. I used useEffect to re render it again in csr.

[deathdefier]

I was playing around with creating profile pictures with the usernames initials I just randomly tried witing the code with a switch case and it worked, I was surprised

[DanielNistrean]

It is true but is easier to read if you use a ternary operator, maps make sense for large sets of computer components.

[vinodnaik]

Could you please add Typescript suggestions for the same

[yannced]

Props get tricky with TS. Would be nice to go down that path and explain:)

[korigamik]

What did you use to create the animation in this video?

[AlexMatheson-sbmb]

I would be curious to know performance difference to using a bunch of conditionals in the JSX and the lookup object.