More Easy React Tricks We Should Know

Photo by Fonsi Fernández on Unsplash

React is a library for creating front end views. It has a big ecosystem of libraries that work with it. Also, we can use it to enhance existing apps.

In this article, we’ll look at some tricks that make developing React apps easier.

Manually Re-render a Component

We can rerender a component by calling the function that’s returned by useState to manually re-render a React component.

For instance, we can write the following code to do that:

import React, { useState } from "react";
export default function App() {
  const [, rerender] = useState({});
  return (
    <div className="App">
      <button onClick={() => rerender({})}>rerender</button>
      <p>foo</p>
    </div>
  );
}

In the code above, we have the rerender function that’s returned by useState ,.

We then added the rerender method in the onClick callback. Then when we click rerender, the React component will rerender.

Move Objects or Functions Out of a Component If There is No Direct Props/State Dependency

Moving objects or functions out of a component if they don’t depend on props or states. This way, we clean up…