5 Important Lessons I’ve Learned While Working with React.js
ByAyush Jain
Working with new technology can sometimes be too difficult and sometimes too easy. You watch too many tutorials to take opinions from other people. However, it’s up to you how you adapt to new technology.
I remember the first time, when I started learning React.JS, it was hard and a bit complex too. As I was new to JavaScript, I was limited to its basics only. If you are starting to learn React, first of all, you should learn to think in React then only your mindset will adapt to it.
In this blog, I’m sharing my personal experience with React in this article-
Let’s go!!
#1. Stay Up to Date
The latest version of React has brought several new features, bug fixes, and new deprecation warnings to help prepare for future major releases. So, you need to keep aware of it and stay up to date. Some of the examples are-
Lifecycle Methods have changed-
- componentWillMount → UNSAFE_componentWillMount
- componentWillReceiveProps → UNSAFE_componentWillReceiveProps
- componentWillUpdate → UNSAFE_componentWillUpdate
You should adopt these changes because if you don’t, it will throw some warning which is not good for the project.
Deprecating “Factory” Components
React had support for a “factory” component that returns an object with a render method:
This pattern was rarely used in the wild, thus, supporting it would cause React to be slightly larger and slower than necessary. If you rely on it, adding FactoryComponent.prototype = React.Component.prototype can serve as a workaround. Alternatively, you can convert it either to a class or to a function component.
Lately, so many new features have been introduced to React which we must have to be aware of and implement them in the projects.
#2. Split Your Code into Smaller Chunks
React is all about the components. So, you have to split bigger pieces into smaller ones. Make it so that if a new person comes into your project, they won’t need days to learn how everything runs.
It’s all about the readability and scalability of your code. If the code has fewer code smells and duplicity, it’s a win-win situation for everyone.
In the above example, the properties are static. So, we can have a pure component that is responsible for the website’s toaster message.
We can use it anywhere in code, using-
toasterInstance(‘Created Successfully’, 2);
Similarly, we can use it for others as well, like-
- Error Message
- Page Loader
- Input
- Button
#3. Always Be Advanced
React is a very developing language, every day some new features and concepts are introduced in it. You must introduce these advanced features to your project.
Most of the people either don’t want to take the challenge or are not eager to put some extra effort to add these new concepts in their projects. But, you should not worry about it and always be ready to take the challenge.
There are many terms you can explore like-
- High Order component
- Error Boundaries
- Lazy Loading
Also, don’t be afraid to try something new at your work (within certain boundaries, of course!). Don’t just experiment on personal projects. People will argue, you just need to have a strong point to prove yourself.
Use lazy loading like this-
#4. Refactor Again and Again
People will criticize your work, as a result, you will have to change your code, many times. But it’s a natural process, code is never free of error. For this, we have to refactor again and again the same code.
The very important thing is never to forget to test your software. Do testing every time you make even a small change – don’t be shy of them.
#5. Don’t Over-Complicate Things
Write code that is easy to understand and easy to use. If you don’t need Redux or something, and still using it because everyone uses it without understanding it’s true purpose, please don’t.
Sometimes you are using the latest technologies and writing complex code to show off, it’s really not needed, write code which is easy to read. Because in the end, you will understand that easier code which was written without showing off. Also, it’s easily understandable for others too.
When some other team members working on your code than for them it’s easy to complete that task without wasting too much time because code is reliable and not too complex. According to me, if your goal is to earn respect than improve your code for the team.
Wrap Up:
React is a very developing language and if you enjoy working in React js you can learn many new topics, concepts and implement them in your projects.
Before JS, I was working in JAVA and it was difficult to adapt JS. But I was all full of excitement and after working with React js, the excitement is same. React is like every day you learn something new.
Therefore, I would recommend everyone to ask themselves: “Do you enjoy what you do?”
If not, then search for that special piece. Because we have to find that special piece. Success cannot be forced, it must be achieved.
HabileLabs worked on many ReactJS projects successfully and providing value-added ReactJS services for a long time. Hope this information is useful for you.
Thanks for Reading!!