refactor(plugins/tech-radar): useMemo, avoid slice

Signed-off-by: marcofaggian <m@marcofaggian.com>

plugins/tech-radar/src/components/Radar/Radar.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import type { Entry, Quadrant, Ring } from '../../utils/types';
 import RadarPlot from '../RadarPlot';
 import { adjustEntries, adjustQuadrants, adjustRings } from './utils';
@@ -36,26 +36,23 @@ const Radar = ({
   entries,
   ...props
 }: Props): JSX.Element => {
-  const [adjustedQuadrants, setAdjustedQuadrants] =
-    useState<Array<Quadrant>>(quadrants);
-  const [adjustedRings, setAdjustedRings] = useState<Array<Ring>>(rings);
-  const [adjustedEntries, setAdjustedEntries] = useState<Array<Entry>>(entries);
-
   const radius = Math.min(width, height) / 2;
 
+  // State
   const [activeEntry, setActiveEntry] = useState<Entry>();
   const node = useRef<SVGSVGElement>(null);
 
-  useEffect(() => {
-    setAdjustedQuadrants(adjustQuadrants(quadrants, radius, width, height));
-  }, [quadrants, radius, width, height]);
-
-  useEffect(() => {
-    setAdjustedRings(adjustRings(rings, radius));
-  }, [radius, rings]);
-
-  useEffect(() => {
-    setAdjustedEntries(
+  // Adjusted props
+  const adjustedQuadrants = useMemo(
+    () => adjustQuadrants(quadrants, radius, width, height),
+    [quadrants, radius, width, height],
+  );
+  const adjustedRings = useMemo(
+    () => adjustRings(rings, radius),
+    [radius, rings],
+  );
+  const adjustedEntries = useMemo(
+    () =>
       adjustEntries(
         entries,
         adjustedQuadrants,
@@ -63,8 +60,8 @@ const Radar = ({
         radius,
         activeEntry,
       ),
-    );
-  }, [entries, adjustedQuadrants, adjustedRings, radius, activeEntry]);
+    [entries, adjustedQuadrants, adjustedRings, radius, activeEntry],
+  );
 
   return (
     <svg ref={node} width={width} height={height} {...props.svgProps}>

plugins/tech-radar/src/components/Radar/utils.ts

@@ -81,7 +81,7 @@ export const adjustQuadrants = (
     },
   ];
 
-  return quadrants.slice().map((quadrant, index) => {
+  return quadrants.map((quadrant, index) => {
     const legendParam = legendParams[index % 4];
 
     return {
@@ -100,14 +100,14 @@ export const adjustQuadrants = (
 };
 
 export const adjustEntries = (
-  _entries: Entry[],
+  entries: Entry[],
   quadrants: Quadrant[],
   rings: Ring[],
   radius: number,
   activeEntry?: Entry,
-) => {
+): Entry[] => {
   let seed = 42;
-  const entries = _entries.map((entry, index) => {
+  const adjustedEntries = entries.map((entry, index) => {
     const quadrant = quadrants.find(q => {
       const match =
         typeof entry.quadrant === 'object' ? entry.quadrant.id : entry.quadrant;
@@ -145,7 +145,7 @@ export const adjustEntries = (
   });
 
   const simulation = forceSimulation()
-    .nodes(entries)
+    .nodes(adjustedEntries)
     .velocityDecay(0.19)
     .force('collision', forceCollide().radius(12).strength(0.85))
     .stop();
@@ -160,7 +160,7 @@ export const adjustEntries = (
   ) {
     simulation.tick();
 
-    for (const entry of entries) {
+    for (const entry of adjustedEntries) {
       if (entry.segment) {
         entry.x = entry.segment.clipx(entry);
         entry.y = entry.segment.clipy(entry);
@@ -168,11 +168,11 @@ export const adjustEntries = (
     }
   }
 
-  return entries;
+  return adjustedEntries;
 };
 
 export const adjustRings = (rings: Ring[], radius: number) =>
-  rings.slice().map((ring, index) => ({
+  rings.map((ring, index) => ({
     ...ring,
     index,
     outerRadius: ((index + 2) / (rings.length + 1)) * radius,