UseMemo has no return value

Question

I have the following scenario. I pass an array of objects (houses) to the component. Then I want to loop through it in the useMemo function and display it in the return method. However, I can't see anything. UseMemo is called and runs, but as I said, I don't see any objects

export default function CompactView({ houses }) {

const houseMemo = useMemo(() => {
houses?.map((house) => {
  return (
       <div>
        ...
       </div>              
     );
   });
}, [houses]);

return (
<>
 ...
  <div>
    {houseMemo}
  </div>
</>

 );
}

Answer 1

The problem you are having is with arrow functions in useMemo. It is missing a return statement. Your code should look like this:

const houseMemo = useMemo(() => {
return houses?.map((house) => {
  return (
       

        ...
       
     );
   });
}, [houses]);

Note the return of houses?.map before, or you can change it to:

const houseMemo = React.useMemo(
    () =>
      houses?.map((house) => {
        return 
...
;
      }),
    [houses]
  );

In the second code example, I removed the {} brackets inside the useMemo callback. hope it helps you