React hooks: call component as function vs render as element

by

Here are some implications of calling component as function vs rendering it as element.

  1. Potential violation of rules of hooks

When you call a component as a function (see TestB() below) and it contains usage of hooks inside it, in that case react thinks the hooks within that function belongs to the parent component. Now if you conditionally render that component (TestB()) you will violate one of the rules of hooks. Check the example below, click the re-render button to see the error:

Error: Rendered fewer hooks than expected. This may be caused by an
accidental early return statement.

 
function TestB() {
  let [B, setB] = React.useState(0);
  return (
    <div
      onClick={() => {
        setB(B + 1);
      }}
    >
      counter B {B}
    </div>
  );
}
 

function App() {
  let [A, setA] = React.useState(0);

  return (
    <div>
      <button
        onClick={() => {
          setA(A + 1);
        }}
      >
        re-render
      </button>
      {/* Conditionally render TestB() */}
      {A % 2 == 0 ? TestB() : null}
    </div>
  );
}
ReactDOM.render(
  <App />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Now you can use <TestB/> instead and see the difference.

  1. Reconciliation might not work as expected

When you render a react component as react element say <TestB/> and then on next render you render some different component <TestC/> instead of it (in the same place in component hierarchy), due to reconciliation algorithm (and since component type has changed), react will unmount <TestB/> component (all its state will be gone) and mount a new component <TestC/> instead.

If you call it as function however (e.g. TestB()), the component type will not participate in reconciliation anymore and you might not get expected results:

function TestB() {    
  return (
    <div     
    >
      <input/>
    </div>
  );
}
function TestC() {
  console.log("TestC")
  return (
    <div     
    >
      <input/>
    </div>
  );
}

function App() {
  let [A, setA] = React.useState(0);

  return (
    <div>
      <button
        onClick={() => {
          setA(A + 1);
        }}
      >
        re-render
      </button>
      {/*  Here we are alternating rendering of components */}
      {A % 2 == 0 ? TestB() : TestC()} 
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
    <div id="react"></div>
  • Type something in the input
  • Now click the re-render button
  • You can see now from the log that component TestC was rendered, but the input shows the same value you typed before – which might not be what you want as you rendered a different component. This happened because reacts reconciliation algorithm couldn’t detect that we moved to a different component (from TestB to TestC) and didn’t remove previous input instance from DOM.

Render these components as elements now (<TestB/> and <TestC/>) to see the difference.

More Related Contents:

  1. The useState set method is not reflecting a change immediately
  2. React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
  3. How can I use multiple refs for an array of elements with hooks?
  4. How can I use React hooks in React classic `class` component?
  5. Invalid hook call. Hooks can only be called inside of the body of a function component
  6. Can I set state inside a useEffect hook
  7. How to call an async function inside a UseEffect() in React?
  8. Why is useState not triggering re-render?
  9. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  10. Where can I make API call with hooks in react?
  11. How to register event with useEffect hooks?
  12. Is there a generic way to set state in React Hooks? How to manage multiple states?
  13. React Function Components with hooks vs Class Components
  14. How can I force a component to re-render with hooks in React?
  15. React hooks: accessing up-to-date state from within a callback
  16. Executing async code on update of state with react-hooks
  17. React Hooks – What’s happening under the hood?
  18. Why React Hook useState uses const and not let
  19. How to change the value of a Context with useContext?
  20. How to prevent re-rendering of components that have not changed?
  21. How target DOM with react useRef in map
  22. React Hooks Error: Hooks can only be called inside the body of a function component
  23. Next.js context provider wrapping App component with page specific layout component giving undefined data
  24. React hooks useState setValue still rerender one more time when value is equal
  25. Updating state to the same state directly in the component body
  26. React hook useEffect runs continuously forever/infinite loop
  27. useMemo vs. useEffect + useState
  28. Equivalent to componentDidUpdate using React hooks
  29. Updating state to the same value directly in the component body during render causes infinite loop
  30. React Hooks render twice

Leave a Comment