What I Learned after 4 Years of React Development

Today I was making some reflections on what challenges and new things I learned in the last few years, specifically related to programming or computer science in general. It is fair to say that I explored many new things, from IoT, computer vision, deep learning, blockchain development, and more on the programming side.

I’m thinking of making a series of posts about my journey into all these technologies, and I wanted to start with my journey and experience working with React. Why React first? No particular reason, but it’s the technology I’m working on the most lately, and I think I have a good message to pass along.

This post will not focus on coding but rather on those moments and lessons that I learned after working with React on many projects, from small personal applications to some big enterprise and other customer-facing applications. a [Suggested reading: Small Tips to Write Better React Code ]

Never Stop Learning

I know this section doesn’t sound like a React specific lesson, but it’s essential. So read me out.!

Like almost anything in computer science, the only constant is change. As developers, it’s part of our job to stay up to date with the best practices for programming languages, frameworks, patterns, design, etc.

When I was starting with React, each component was a class, and we didn’t have any of the “fancy” features such as hooks, which I can’t think of a project now where I’m not using them.

The speed at which changes introduce forces us to be continually reading documentation and blog posts to understand what’s new, why we should use it, and how. But don’t think of it as a burden. All these changes are purposely introduced in frameworks and programming languages to make our lives easier or bring a better experience to the users; in all cases, it’s a win situation.

Stay Hungry. Stay Foolish.

Minimalism Is Your Best Friend

React is all about components, and each of these components will be responsible for your application’s behavior. But sometimes, the hard question is when to grow an existing component vs. when to create a new one.

After building many applications and refactoring those same applications a few times, I can tell that what worked best was to create components as minimal as possible. The smaller the components, the smaller complexity each of them introduces. And yes, I understand that it adds complexity when interlinked, but believe me, the benefits are far exceeding.

I’ve reviewed components with enormous states, all because a lot was happening on those components. It was so hard to read as things were mixed after refactoring. We ended with multiple components, just a few lines of code each. It was like magic, so much easier to read, to debug.

Another advice on this same topic is to keep your side-effects and your business logic as separate from the UI as possible. I know it is sometimes tempting to solve it in the component, but if you want to save yourself some time in the future, keep them split.

Keep components simple!

Don’t Be Afraid to Refactor

I’ve read many times on the internet (probably Reddit) that you need to refactor because the code was terrible initially, and I couldn’t disagree more. I believe that refactoring is not only necessary but a normal thing to do. I see it as your application evolving to be future proof.

Sometimes, we refactor to make a specific function, component, or piece of code more readable and easier to understand. Just do it! In the long run, you will save yourself and your team a lot of time.

Why you got to the situation where you need to refactor is hard to say, but here are some ideas:

• Library updates that introduced new patterns, concepts, ideas, or ways to solve problems.
• Code that has been growing for a while in small increments, and with time complexity grew and is now hard to maintain.
• Deprecation of features

Embrace refactoring as a means to cleaner code, and don’t be too afraid about braking things; remember that you have tests! ;)

React Has More Than What You Know.

React is much more than the library itself; other libraries play nicely with React that you need to learn; there are patterns, best practices, etc.

One of React’s beautiful things is its simplicity, but there are advanced features that perhaps you don’t use on every project. However, knowing them will make you a better developer and help you resolve more complex and challenging tasks.

Explore some of the advanced features and patterns as part of your learning journey. Professionalize the library and get a deeper understanding of how it works under the hood.

Some examples of things you can try out:

• References and context
• Higher-Order Components
• Advanced JS patterns and functions
• Memoization
• and others

Explore advanced features and understand how they work

Conclusion

JavaScript and React, in particular, are unique technologies that help us develop incredible applications. They are continuously evolving to satisfy the user needs and stay on the top as developers and companies prefer to build their products.

Staying up to date is essential, but it is not enough; experience comes from learning new things and understanding how they work.

I hope you find this article helpful, and please leave in the comments whare are your best lessons from working with React. Do you agree with me?

Thanks for reading!

Juan Cruz Martinez

Juan has made it his mission to help aspiring developers unlock their full potential. With over two decades of hands-on programming experience, he understands the challenges and rewards of learning to code. By providing accessible and engaging educational content, Juan has cultivated a community of learners who share their passion for coding. Leveraging his expertise and empathetic teaching approach, Juan has successfully guided countless students on their journey to becoming skilled developers, transforming lives through the power of technology.