2024-01-10
4250
#react
Esteban Herrera
337
Jan 10, 2024 â‹… 15 min read

React conditional rendering: 9 methods with examples

Esteban Herrera Family man. Java and JavaScript developer. Swift and VR/AR hobbyist. Like books, movies, and still trying many things. Find me at eherrera.net

Recent posts:

what is vibe coding

What is vibe coding? And is it worth the hype?

Vibe coding is taking the dev world by storm. Break down what it actually means, how the term became popularized, and why it’s catching on.

Elijah Asaolu
Apr 9, 2025 â‹… 5 min read
typescript record types

Level up your TypeScript with Record types

Learn about the TypeScript Record type, its basic usage, and practical use cases, including how to use it with generics.

Matteo Di Pirro
Apr 9, 2025 â‹… 9 min read
tanstack start framework

An introduction to the TanStack Start framework

Discover the new full-stack React Framework, TanStack Start, and use it to build a simple developer portfolio styled with Tailwind CSS.

Amazing Enyichi Agu
Apr 9, 2025 â‹… 13 min read
best ai coding tools 2025

The 10 best AI coding tools for 2025

AI coding tools are growing in prominence. Explore the leading AI coding tools for 2025, from IDEs to conversational AI assistants.

Isaac Okoro
Apr 8, 2025 â‹… 9 min read
View all posts

4 Replies to "React conditional rendering: 9 methods with examples"

  1. Nice article!

    Why do you still use class components? It’s 2020, function components with hooks are not an “alternative” way. They are THE way to go and classes are unnecessary for the examples you show.

    Your article is a great resource for beginner React developers, but also confusing, because you use class components.

    1. This post was originally published several years ago, before the stable release of the Hooks API, and we just updated it a few months back. We’ve added an editor’s note to clarify. Thanks for keeping us honest.

  2. Althought this article has inmense value and all of this is valid React, when an application gets big, using live vanilla javascript to condition the render adds complexity and you start building an enviroment very prone to errors later, good practice will be create a component that handles the condition taking it as a prop and returns the children or null, and reuse it across the app, making your render entirely declarative instead of imperative… has been an old trade in San Francisco since the begining of React.. truth is you can call it how ever you want,, but make sure the component do that.. back in the pre-hooks days ppl use to do it using a HOC ….

Leave a Reply