CODEWITHSUNDEEP
reactjsreact-hooks
Daniel Yang
Daniel Yang

Reputation: 33

React's useMemo method resulting in invalid hook call

The scenario is very simple and ups can go to code straight without reading the below description.

I'm creating a very simple react app that renders a list of (each which a unique id) which contains a single h3 element. When a h3 element is clicked its text will be changed from "not clicked" to "clicked". This is achieved by a useState in the root component which is App. The state tracks the the id of the component being clicked. When a h3 element is clicked it will trigger a call back which sets the clicked id to its own id. The problem is that all the custom List Component will re render when a click is triggered. I'm trying to use React's useMemo on the to prevent re rendering but got this error:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app

// App.js
import React from 'react';
import ListElement from './ListElement'
const listOfID = [1,2,3,4,5,6]

function App() {

  const [clicked, updateClicked] = React.useState(null)
  return (
    <ul>
      {listOfID.map((id, index )=> < ListElement key={index} id={id} clicked={id == clicked} updateClicked={updateClicked}/>)}
    </ul>
  )
}

// ListElement.js
import React from 'react';

export default React.useMemo((props) => {
    console.log("rendered")
    return (
        <li>
            <h3 onClick={() => props.updateClicked(props.id)}>{(props.id == props.clicked) ? "clicked" : "not clicked"}</h3>
        </li>
    )
},
    (prevProps, nextProps) => {
        return prevProps.clicked == nextProps.clicked
    }
);

Upvotes: 3

Views: 2633

Answers (1)

Dupocas
Dupocas

Reputation: 21297

useMemo is a hook. I belive you meant React.memo to prevent useless renders in Components.

export default React.memo((props) => {
    console.log("rendered")
    return (
        <li>
            <h3 onClick={() => props.updateClicked(props.id)}>{(props.id == props.clicked) ? "clicked" : "not clicked"}</h3>
        </li>
    )
},
    (prevProps, nextProps) => {
        return prevProps.clicked == nextProps.clicked
    }
);

Upvotes: 6

Related Questions