DEV Community

Cover image for Clean code Tips
Akash Yadav
Akash Yadav

Posted on

Clean code Tips

This approach helps in writing cleaner and more readable code for conditional rendering without using curly braces directly.

In this code, the Choice object provides two components: When and Then. The When component renders its children if the provided condition is true. On the other hand, the Then component renders its children if the condition is false. This approach helps in writing cleaner and more readable code for conditional rendering without using curly braces directly.

Image description

Image description

Image description

Top comments (7)

Collapse
 
paulorodes profile image
Paulo Rodrigues

This might have its uses but the example is not the best.

We went from 14 lines of readable and straightforward code to 28 of “non-react like” spaghetti that reinvents ternaries by encapsulating three components into an object, instantiating it two times when it just needs to render one and ending up using ternaries anyway.

Collapse
 
svijaykoushik profile image
Vijay Koushik, S. 👨🏽‍💻

Totally agree with you. Sometimes sticking with a simple, straightforward approach is the way to go. I've seen clean code get so convoluted that it actually makes debugging a nightmare, especially when a small change messes up something that used to work fine. Keeping it simple just seems to work best in those cases.

Collapse
 
echoblinddog profile image
echo blinddog

I found an innovation designed to transform the lives of blind dogs name: Echo Blind dog. Specifically designed to optimize their navigation in various environments, this device uses advanced echolocation technologies. By enabling the blind dog to detect obstacles and providing audible location cues, Echo becomes the ultimate companion for a more independent and secure life.

Collapse
 
alexmario74 profile image
Mario Santini

I may be wrong, but the Then should be Else or Otherwise.

Furthermore, the And should concatenate the When condition with its own.

At least, regarding the meaning in English.

I'm not sure the component you propose is so easy to be used properly, considering the issue I highlighted.

Collapse
 
pavelee profile image
Paweł Ciosek

Cool! 😎

Collapse
 
jaloplo profile image
Jaime López

Great approach!!! It makes more readable the code. Congrats!!!

Collapse
 
cheikhnouha profile image
Cheikhnouha

Great approche