Today I was reflecting on what I learned in the last few years, specifically related to programming and computer science. It is fair to say that I explored many new things — IoT, computer vision, deep learning, blockchain development, and more on the programming side.
I was 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? No particular reason, but it’s the technology I’m working with the most lately, and I think I have a good message to pass along.
This post will not focus on coding but rather on the lessons I learned after working with React on many projects, from small personal applications, to some big enterprise and other customer-facing applications.
Never stop learning
This section won’t sound like a React specific lesson, but it’s essential. So hear 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 — and now I can’t think of a project where I’m not using them.
The speed at which it changes forces us to be continually reading documentation and blog posts to understand what’s new, why we should use it, and how. But you shouldn’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-win situation.
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, 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.
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 best things is its simplicity, but it has also advanced features that perhaps you wouldn’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
Conclusion
JavaScript and React, in particular, are unique technologies that can help you develop incredible applications. They are continuously evolving to satisfy the user needs, 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.
This article was originally published on Live Code Stream by Juan Cruz Martinez (twitter: @bajcmartinez), founder and publisher of Live Code Stream, entrepreneur, developer, author, speaker, and doer of things.
Live Code Stream is also available as a free weekly newsletter. Sign up for updates on everything related to programming, AI, and computer science in general.
Get the TNW newsletter
Get the most important tech news in your inbox each week.