Merge pull request #36 from kinotio/develop

feat: use memo on computed value from fetched data in contributors and products

components/layout/sections/contributors.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState, memo } from 'react'
+import { useEffect, useState, memo, useMemo } from 'react'
 import { GithubIcon } from 'lucide-react'
 import Link from 'next/link'
 
@@ -22,6 +22,8 @@ export const ContributorsSection = () => {
       .finally(() => setLoading(false))
   }, [])
 
+  const memorizedContributors = useMemo(() => contributors, [contributors])
+
   return (
     <section id="contributors" className="container py-24 sm:py-32">
       <div className="text-center mb-8">
@@ -48,7 +50,7 @@ export const ContributorsSection = () => {
           </>
         ) : (
           <>
-            {contributors.map((contributor) => (
+            {memorizedContributors.map((contributor) => (
               <Contributor key={contributor.id} contributor={contributor} />
             ))}
           </>

components/layout/sections/products.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect, memo } from 'react'
+import { useState, useEffect, memo, useMemo } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { GithubIcon } from 'lucide-react'
@@ -27,6 +27,8 @@ export const ProductsSection = () => {
       .finally(() => setLoading(false))
   }, [])
 
+  const memorizedRepos = useMemo(() => repos, [repos])
+
   return (
     <section id="products" className="container py-24 sm:py-32">
       <div className="text-center mb-8">
@@ -63,7 +65,7 @@ export const ProductsSection = () => {
         </>
       ) : (
         <>
-          {repos.map((repo) => (
+          {memorizedRepos.map((repo) => (
             <Product key={repo.id} repo={repo} />
           ))}
         </>