Silly React Articles (Part 1)

Let us go over the silly mistakes you would most likely make writing React through every stage as a developer writing react, without further or do, dive in.

The Beginner Mistakes

At this point or stage, you would make the “most” silliest of mistakes, and trust me there is no escaping. But here are a few that you would make at least once or twice.

The Component Invoking Mistake

React is a component-based javascript library which means when writing we write them in little bits of files and then couple them in another file this process is known as the component invocation process, yes importing and exporting of components, that is what it is.

THE SILLY MISTAKE

Considering the representations above, notice any difference? If you don’t (smirk) then you’re a bonafide member of the react beginners category, well in react the right way for invoking components is the image on the right where the component “Greeting” starts with a capital letter “G”.

The Component Exportation & Importation Mistake

Importing named exports as default exports is another silly mistake you would make. Below is the difference between a named export component and a default export component

THE SILLY MISTAKE

You would import the named export component as a default component and vice-versa sometimes, at least once or twice. So in the hope of avoiding that below is the right way to import them and the difference is wrapping the component in curly braces when importing for named export.

The State Mutating Mistake

considering the above code representation we are mutating the countstate with a setCount function using the usestate hook and all it does is when we click the button it would increase the count value by one.

THE SILLY MISTAKE

You probably think the above code representation is right, of course, it is from the execution point of view. But whenever there is a state that would mutate depending on its previous value one should not access such a state by using its default value and the reason is when the value of the default state is being changed it doesn’t change immediately instead it awaits the execution of all the codes in the component then after it would change and re-render the entire component.

So, how do we fix this, instead of making use of countstate function to access the value we can actually access the exact value using a callback function that takes in a keyword as an argument in this case we use a prev value this way the state function would make use of the real-time value of the state, see code representation below.

Conclusion

Don’t worry you’re not alone everyone would make these errors at least once or twice.

I expect questions for clarification. Kindly criticize and make corrections as well. Share Thank you.