Thinking of picking up React for your client side app in 2021? Why don’t you pull up a chair and I’ll tell you about the learning curve, it’s strengths, it’s faults, and the overall experience that has been learning React Hooks.
I wouldn’t be doing my due diligence if I didn’t preface with some note on my front end experience. I have been doing front end development ever since I got my hands on my first computer back in high school. And since then have been captivated by the full stack web dev ecosystem. I have played with Vue for over a year on personal projects, and have worked with Angular stacks for about 3 years. Have also done Rails/Django/Go projects for web. It has been a lifelong (er, for as long as I’ve been a developer) endeavor of mine to understand as many stacks and frameworks as possible.
React is a very approachable framework. Adopting the Hook paradigm (the progressive approach to using react as a more functional framework as opposed to using classes) is very trivial to get started rendering and updating the DOM automatically via state changes. Defining your state, its props (input for a component), and the view (the JSX return of a component), all in the same file feels really good. Put simply, it’s succinct. This is a product of a functional approach and the component mindset that React Hooks promotes.
However, in the last year of experience learning React, I have found the most knowledge coming from 3d party sources (non-react websites) & working with coworkers to find best practices. This is React’s biggest shortcoming, in my opinion. I think you can juice maybe 40% of what you need from the fruit of knowledge that is the official React Hooks Docs. When it comes to handling pesky rerenders that are bogging down performance or outright preventing your component from behaving, leveraging articles like this (a rundown on all the react provided hooks) to get example driven context to using React Hook’s custom hooks has been super helpful.
All in all, it’s been an engaging experience to learn React. For better and for worse, I feel like there’s always something I could be doing better in my React development. There’s a low barrier to entry for learning Hooks and what feels like a moderately high skill cap to be considered a perfect developer in the framework. Oftentimes I’ll come across other React projects that do things differently / use hooks in a new way and it takes some investigating to know if who is utilizing the framework correctly / innovatively.
Rules of Thumb:
KEEP COMPONENTS SIMPLE: Keep components under 200 lines of code. If you’re going over, you can probably break down your component into sub components. This not only keeps the application readable but also functionally provides your app with self contained rerenders in smaller components.
EFFICIENT RERENDERS: Really look to utilize the custom hooks (useEffect, useLayoutEffect, useMemo, useCallback, etc) when you notice performance issues. When you’ve introduced infinite rerenders, React Hooks is good about letting you know in the browser console to use the custom hooks. There are definitely more aggressive approaches to using the custom hooks to optimize rendering, and I definitely would encourage it once you get the fundamentals of Hooks down.
STILL DO TESTING: Using Jest it’s still trivial to set up testing with the @testing-library/react. Testing out our components has caught bugs and ensures our future changes don’t break anything, so ya know, the usual benefits of testing
NO STANDARD DIRECTORY STRUCTURE: Whereas in Angular and some other frameworks, you have a pretty well defined approach to laying out the directory structure of a client project; React offers none of that out of the box.