Skip to content

Tips and Tricks That Will Make You a Better ReactJS Dev

    This post was originally published on The smart recorder

    All right, folks — it’s time for another piece to help you improve your React game, become better React devs, write better code, and excel at coding interviews.

    Use React Hooks In Functional Components

    Hooks were introduced in React v16.8 and are a huge boost for functional programming within React. With Hooks you can, and should, make use of functional components instead of class components. But wait…functional components and state? And what’s with lifecycle methods?

    Have no fear — React Hooks have that covered for you. Let’s see some examples:

    This was the traditional way of using a class. With hooks, we can now do i using the useState Hook, like this:

    Looks easier? It is! We’re using the useState Hook to set the initial state to an empty String (‘’) and it returns an array with the current state (value) and a method to mutate that state (setValue). We are also using array destructuring to get access to value and setValue.

    Functional components don’t have access to lifecycle methods by default. But now we have Hooks and the useEffect Hook comes to our rescue. First, the traditional way, using a class:

    Here’s the same example making use of the useEffect Hook:

    How awesome is that? useEffect will aways run when one of the values in the passed array (value) changes.

    These are just two examples of using React Hooks — there are more out there. You can even create your own custom hooks. In my opinion, every ReactJS Dev should learn this concept!

    Use The React Context API For Passing Props

    Maybe you’ve experienced a situation where you have deeply nested components and a need to pass down props from the higher to the lower tier, with some components sitting in the middle, just letting those props pass. Instead of editing each component in the chain, you can make use of the React Context API.

    In this example, we create a new context in a separate file like this:

    Then we need to wrap the parent element, hence the highest tier from where we want to distribute props with the provider we created:

    Now, all of the ParentComponent’s children have access to auth as a prop. How cool is that?

    Now, all we have to do is to consume the context in a child component. I’ll make use of functional components and the useContext Hook to do so:

    If there were more child components nested, they would have access to the context as well. Awesome!

    Styled-Components

    Styled-Components belong effectively to the CSS-in-JS libraries that abstract the CSS to component level, using just JavaScript to describe styles. They can be created via the ES6 Template Literal Notation using back-ticks like this:

    Now you have a custom-styled button component that you can use all over your application, instead of the normal HTML button. All styles are encapsulated and won’t interfere with other styles in the DOM. Pretty sick, right?

    Sorce : https://betterprogramming.pub/10-tips-and-tricks-that-will-make-you-a-better-reactjs-dev-95f66cc18087