DEV Community

Discussion on: 4 Ways to Render JSX Conditionally in React

 
danwalsh profile image
Dan Walsh

Really good points you bring up.

Just on one of them:

I was talking about "defensive programming" when I said that you should take that as a sign something should be worked on. If you need to avoid passing something because it could break stuff, then maybe make that stuff more stable? The previous example could avoid the "if" altogether if the Example component was able to receive someProp optionally, but because is required we had to write all that "defensive" code.

In most of the projects I work on, I need to do a lot of “progressive enhancement” on more monolithic systems (which inherently come with a number of restrictions/limitations/requirements). I’m often having to server-side render component data as Objects on the window global and then ingest them when my components conditionally render. Because I can never guarantee the stability of that data, I sometimes (not all the time) need to rely on the early return pattern to ensure the stability of the component.

Sometimes it’s because a CMS author has used a few unescaped characters and broken the Object (which we always do our best to sanitise, regardless). Other times a regression issue might cause the data Object to be malformed when it renders. But due to the nature of the environment, there is sometimes no way to make the data source “bullet proof”.

In my experience, when you can’t guarantee the existence and stability of your props, the early return pattern helps to maintain the stability of your components.