4 Useful React Tricks I Bet You Didn't Know Before (Some Are Too Trivial But Useful)

Hello, React devs! Think you know React? You probably do, but there are a couple of cool tricks only a handful of React devs would know which I'm about to share with you. If any of these tips are new to you, you owe me a like.

[1] Use JSX Extension For React Components

To be honest, I don't know if .jsx extension for components make your React app faster, but it certainly helps to differentiate component files and other files in your project directory. Plus, in VS Code, you'll see a React logo beside .jsx files instead of JavaScript logo so you can be assured that you're a React developer at all times.

[2] Save One Line of Code

Save one line of code by removing the following line because it's unnecessary to import React from React 17 onwards.

import React from "react";

[3] Modularize Components

So, you have structured your React project well with descriptive files and folders, but what about individual components? I bet they look like the following picture.

The problem is that you're writing your JSX expressions one after another and the codes look like a long, boring article. What you need to do instead is you need to separate groups of related JSX expressions to individual methods and compose those methods together in the return statement (which is responsible for displaying UI on the screen).

function Cart() {
  const loadAllProducts = (products) => {
    return (
      <div>
        {products.map((product) => (
          <Card
            product={product}
          />
        ))}
      </div>
    );
  };

  const loadCheckout = () => {
    return (
      <div>
        <h1>Checkout</h1>
      </div>
    );
  };

  return (
    <div>
      <div>
        <div>
          {loadAllProducts(products)}
        </div>
        <div>{loadCheckout()}</div>
      </div>
    </div>
  );
}

See what I did there? Instead of cramming all my JSX expressions after the return keyword, I wrote individual, meaningful methods before the return keyword and composed them afterwards. With this, you can clearly see all the working parts in a component.

[4] Weird Hack to Reload Component

There are various ways to reload your component but sometimes, you'll get stuck because you might perceive useState() and useEffect() Hooks to run a certain way and they wouldn't which could leave you frustrated. Thankfully, there's a way to reload your component whenever you want to using the following technique.

function Product({ reload = undefined, setReload = (f) => f }) {
  // a bunch of codes go here...

  const showRemoveFromCart = (removeFromCart) => {
    return (
      removeFromCart && (
        <button
          onClick={() => {
            // remove the product from cart
            setReload(!reload);
          }}
        >
          Remove from cart
        </button>
      )
    );
  };

  // return...
}

This is a demo component which isn't fully implemented. Anyway, you need to pass two arguments just like in this function. In this case, one is reload and another is a function to set the reload value. If it doesn't make sense don't worry, because all you need to do is, whenever you want this component to be re-rendered, use the setReload() method (you can name it anything you want) and flip the value of reload argument just like I did in showRemoveFromCart() method. Your component will refresh immediately. Of course, whichever component that consumes this component must have state variable + method to set that variable from useState() Hook which will be passed down to this component.