React - re-rendering of the component via hook

Question

How can I make a Hook state change to re-render only the render of the Hook and not the component? I went around this by adding logic to the null returning middleware component, but I don't know if it's a good idea.

import { useState, useMemo, useEffect } from "react";
import "./styles.css";

function useTime() {
  const [a, setA] = useState(0);

  console.log("good-render", a);

  useEffect(() => {
    setInterval(() => {
      setA(a + 1);
    }, 3000);
  }, []);
}

function Aaa() {
  useTime();

  return <></>;
}

export default function App() {
  console.log("bad-render");

  return (
    <div className="App">
      <Aaa />
    </div>
  );
}

Please see the How to Ask page--please include the relevant code in the question :) — Dave Newton
– Dave Newton, Commented Apr 20, 2021 at 17:17

Zachary Haber · Accepted Answer · 2021-05-04 13:21:46Z

Insofar as I'm aware, you can't stop a component rendering from a hook. Whenever the state in a component changes, the component gets set to re-render, which calls all hooks in it. In fact, conditionally calling hooks would break the rules of hooks.

Your best bet would be to encapsulate all the logic you need in refs and effects if you don't want the custom hook to cause a re-render. That being said, unless you have other issues with your code (i.e. a lot of really complicated and time consuming code), then a few extra re-renders isn't the worst thing in the world.

There's definitely a point to the idea that premature optimization is a problem.

That being said, different approaches for preventing the entire tree from re-rendering would be:

Encapsulate the logic in a separate component without children (as you show above)
Use React.memo on the components that make up the children so React can know it should check for changes by reference on all the props to determine whether to re-render.

Collectives™ on Stack Overflow

React - re-rendering of the component via hook

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related