How to prevent re-rendering of components that have not changed?

by

Personally I would avoid React.memo / React.useRef / React.useCallback.

The simplest solution to your example is just create another component, and store the state with this.

eg.

const Button = () => {
  console.log("Button Rendered!");
  window.alert("Button Rendered");
  return <button onClick="">Press me</button>;
};

const TextInput = () => {
  const [textInput, setTextInput] = useState("Hallo");
  const onChangeInput = useCallback(
    (e) => {
      setTextInput(e.target.value);
    },
    [textInput]
  );
  return (
      <input
        type="text"
        onChange={onChangeInput}
        value={textInput}
      />
  );
}


export default function App() {
  return (
    <div>
      <TextInput/>
      <Button />
    </div>
  );
}

In the above if you change Text, there is not State change in App, so Button doesn’t get re-rendered, no need for useMemo etc..

You will find React works really well, the more you divide your components up, not only does it solve issues of re-render, but potentially makes it a lot easier to re-use components later.

IOW: keep state as close to the component as possible, and performance will follow.

Of course your example is simple, and in a real app you will have HOC’s etc to cope with, but that’s another question.. 🙂

More Related Contents:

  1. Where can I make API call with hooks in react?
  2. How to register event with useEffect hooks?
  3. How can I force a component to re-render with hooks in React?
  4. What is useState() in React?
  5. Do we still need functional setState way in react hooks?
  6. State not updating when using React state hook within setInterval
  7. Make React useEffect hook not run on initial render
  8. Push method in React Hooks (useState)?
  9. ReactJS: Maximum update depth exceeded error
  10. Wrong React hooks behaviour with event listener
  11. How to call loading function with React useEffect only once
  12. How to use componentWillMount() in React Hooks?
  13. Is it possible to share states between components using the useState() hook in React?
  14. What is the difference between React Native and React?
  15. react useEffect comparing objects
  16. React useState hook event handler using initial state
  17. How do I setState for nested object?
  18. React – useState – why setTimeout function does not have latest state value?
  19. What does useCallback/useMemo do in React?
  20. How to hide bottom navigation bar on a specific screen in react native?
  21. React Hooks useState+useEffect+event gives stale state
  22. How to add “refs” dynamically with react hooks?
  23. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  24. React Hook “useEffect” is called conditionally
  25. Could not find “store” in either the context or props of “Connect(App)”
  26. What are the differences when re-rendering after state was set with Hooks compared to the class-based approach?
  27. Performance penalty of creating handlers on every render with react-hooks
  28. Function inside functional component in React hooks – Performance
  29. import * as React from ‘react’; vs import React from ‘react’;
  30. Why would we use useEffect without a dependency array?

Leave a Comment