Reddit user hogstfelttf recently asked the React subreddit, “As a React junior, which areas should I focus to advance my skill?” This article summarizes the top replies from experienced React developers.
- Understand why re-renders are happening. How did your component re-render? What caused it? For a highly-recommended in-depth analysis, check out “A (Mostly) Complete Guide to React Rendering Behavior” by Mark Erikson.
- Define your projects goals first, then achieve them. By establishing the definition of a minimally viable product (or MVP), you can focus on achieving important goals and prevent distractions. Spending too many hours obsessed with the vertical alignment of your text will lead to burn out. You are already expected to spend additional time learning React. Fixating on the little things will hinder the growth that really matters. Deliver the critical path code, then go back and fill in the gaps.
- Practice writing your own custom hooks if you have not yet written one.
- “The Beginner’s Guide to React” is a free online course on Egghead.
- In a workplace setting, add test coverage to any newly written code. This is an additional learning curve that will slow your deliverables, but it will earn trust with your peers, improve confidence in your code, and establish long-term best practices as habit to prevent regression and improve secure deployments.
- Be able to explain why you made the choices you made. During a code review, if you answer to, “Why did you do [implementation]?” is “I don’t know” or “It just worked,” then that’s the wrong answer. Code that works for unknown reasons is not safe code. It is code that frequently has or relies on “side effects,” which are subject to start or stop occurring at any moment. For example, you added some code, it fixed the bug, and you don’t know why. It could be that, coincidentally, the bug was fixed by another module. Once that module is removed or refactored, because it was never defined as being responsible for fixing your bug (and only fixed your bug on accident, as a “side effect” of what it was intending to do), then your bug suddenly resurfaced. You need to know why your code works and be able to communicate it to your team. This will prevent bugs from resurfacing and help solve them when they occur in other modules in the future.
- Humbly accept advice and criticism. Do not perceive yourself to be perfect, and do not feel a need to be perfect. Perceive advice and criticism as learning opportunities and perceive growth as a goal.
- Learn the value of abstractions. What is an abstraction? When do they make things simple? When do they make things more difficult? Using the right abstraction at the right time will make your code easier to read, review, and maintain long-term.
- Learn the basics of the build processes. What is Webpack doing? What is Babel doing? You will eventually need to tweak and debug these processes. Their benefits go beyond the React app on which you are working, and you will need to write them from scratch once you delve into shared component libraries.
- Follow the “Thinking in React” guide to implementing an application.
If you have any additional suggestions, please leave them in the comments below.