DEV Community

Cover image for 10 Cool React Tips
Alexandru-Dan Pop
Alexandru-Dan Pop

Posted on • Updated on • Originally published at blog.alexandrudanpop.dev

10 Cool React Tips

Hello Dev Community! ๐Ÿ‘‹

Today I will talk about some React tips I want to share with you. Those will be in the form of some tweets that I posted.

Leave a ๐Ÿงก & ๐Ÿฆ„ if you like this article.

10 Cool React Tips โš›๏ธ

1. Create a Webpack config in a conveniant way using createapp.dev

2. Learn to automatically check Accessibility with Axe

3. Use Parcel for 0 config builds, even with Typescript

4. React testing library debug function

5. How to handle errors in React

There is a cool package created by on of the React core team members for Error boundaries.
You can check it out here.

6. Use function components and Hooks โœ”๏ธ

There are many reasons apart from just this being the trend. If you use function components it is much more probable to find libraries that expose hooks APIs.

Probably in the future a lot of libraries will only expose hooks APIs. You won't be able to use hook APIs with class components.

7. Use the React Context API for shared / global state

Simply put - I am seeing less and less use cases for Redux or other state management libraries considering in React we have the Context API.

With the Context API you are using the same paradigm as with regular useState or useReducer hooks. This is lowering the learning curve for new React developers as they don't need to learn Redux or some other state management library.

8. Distinction in React Testing lib for getBy* vs queryBy*

9. Learn to use React testing library correctly ๐Ÿš€

Doing this can skyrocket the confidence you have in writing tests and the production code that you write.

10. Correctly handling async await in React components

Learning how to correctly handle asynchronous code in React is difficult and can lead to a bugfest. I explain all the concepts and how to deal with it in a simple way in one of my other dev articles:

If you are like me and always searching for better ways to improve your React, Javascript and Typescript experience, consider following me on Twitter where I post more cool content.

๐Ÿ‘‡ Comment below ๐Ÿ‘‡

Let me know if this is valuable for you and share some cool stuff you learned about React lately.

Top comments (7)

Collapse
 
stereoplegic profile image
Mike Bybee

It's important to note that, at least until something like the proposed useContextSelector hook is implemented, you need to consider rerenders when using context for global state, and either use multiple, more localized nested contexts (which I'd recommend anyway, even if you were using Redux stores instead of context) or something like refs or JS proxies to reach up to a top level context without rerendering every time unrelated parts of that context change.

Collapse
 
alexandrudanpop profile image
Alexandru-Dan Pop

Thanks for the insights!

I want to link Mark Erikson's (Redux maintainer) blog that is like the holy Bible of React rendering behavior: blog.isquaredsoftware.com/2020/05/...

Collapse
 
caroso1222 profile image
Carlos Roso

Great post! I love there's Hope with the context API. Redux can be such a pain some times.

Collapse
 
alexandrudanpop profile image
Alexandru-Dan Pop

Thanks Carlos! Yep Redux is painful sometimes due to its boilerplate.

Collapse
 
annietaylorchen profile image
Annie Taylor Chen

I also don't like Redux... but some jobs require it still. That's the only reason I learned it even when I learned React the hooks were already available. But so far my favorite is the Svelte's state management.

I should dig more into testing though. :)

Collapse
 
alexandrudanpop profile image
Alexandru-Dan Pop

Yeah there's a lot of Redux code out there, and a lot of React development got bound to Redux somehow... Sometimes companies hire for React/Redux developers :-)

.. Svelte state management is indeed more interesting....

Collapse
 
alexandrudanpop profile image
Alexandru-Dan Pop • Edited

Reusability can be a problem with Redux as well if a component depends on it - it is not reusable.

Reusable components are the ones that don't depend on Context or Redux, they just depend on some simple props passed to them.