How to wrap the initialisation of an array in its own useMemo() Hook?

Question

Can someone please give the solution to this warning message?

137:7 warning The 'slider1' array makes the dependencies of useEffect Hook (at line 143) change on every render. To fix this, wrap the initialization of 'slider1' in its own useMemo() Hook react-hooks/exhaustive-deps

138:7 warning The 'slider2' array makes the dependencies of useEffect Hook (at line 143) change on every render. To fix this, wrap the initialization of 'slider2' in its own useMemo() Hook react-hooks/exhaustive-deps

I am new to react and have no experience with it. It would be nice if someone can provide the complete solution.

Here is the code:

  const [nav1, setNav1] = useState(null);
  const [nav2, setNav2] = useState(null);
  let slider1 = [];
  let slider2 = [];

  useEffect(() => {
  setNav1(slider1);
  setNav2(slider2);
  }, [slider1, slider2]);

Floppy

Please , can you share your code with snack.expo.dev , it will be easier to help you with all yours code – Trish

@Trish sorry but can't do this – Floppy

Answer 1

const slider1 = useMemo(() => [], []);

As simple as that :)

Also know the problem here, let variable in React recreates itself on every tick, since every tick will rerun useEffect you'd have an infinite loop going on :) You could also use it as state default value instead of null :)

Zimmermann

I have replaced this with "let slider1 = []" but now the warnings are warning: 'useMemo' is not defined & warning: 'slider1' is constant – Floppy

@ALiRazaDarr: you must import the hook first: import React, { useState, useEffect, useMemo } from 'react'; – Lengel

Answer 2

Don't forget to import the hook

import React, { useState, useEffect, useMemo } from 'react';

Rumania

Answer 3

I had the same issue but with an array that had values so I figured I would post what did after I imported the hook.

import { useMemo } from 'react';

const events = useMemo(() => { return ['load', 'mousemove', 'click', 'scroll', 'keypress']; }, []);

hope this helps someone.

Jessi