React hooks - adding exhaustive dependecies to useCallback/useEffect causes infinite loop

Question

This has been answered here and here however I am still having the same problem after following the solution.

Building an app using react-beautiful-dnd. showMap is a boolean which gets passed from a parent component when a button is clicked. All showMap does is

turn a 3 column grid into 5 and vice versa
rearrange the items on the grid

I commented out the dependencies inside useEffect and useCallback because once they are added in, I get an infinite loop.

Why is that?

Note: When useCallback has an empty dependency array and I log the updated value of fakeTrips inside useEffect the value is correct. What is tripping me up is what if this warning is a problem down the line somewhere. I also want to know why it's happening.

const Grid = ({ showMap }) => {
  const [fakeTrips, setFakeTrips] = useState({
    tripsItems: {
      // tripItem1: {
      //   id: 'tripItem1',
      //   content: 'Stanley Park',
      // },
      // tripItem2: {
      //   id: 'tripItem2',
      //   content: 'Capilano',
      // },
      // tripItem3: {
      //   id: 'tripItem3',
      //   content: 'Terra Nova',
      // },
      // tripItem4: {
      //   id: 'tripItem4',
      //   content: 'English Bay',
      // },
      // tripItem5: {
      //   id: 'tripItem5',
      //   content: 'Keg',
      // },
      // tripItem6: {
      //   id: 'tripItem6',
      //   content: 'Top Shanghai',
      // },
      // tripItem7: {
      //   id: 'tripItem7',
      //   content: 'Bottom Shanghai',
      // },
    },
    columns: {
      column1: {
        id: 'column1',
        tripItemIds: [],
      },
      column2: {
        id: 'column2',
        tripItemIds: [],
      },
      column3: {
        id: 'column3',
        tripItemIds: [],
      },
      column4: {
        id: 'column4',
        tripItemIds: [],
      },
      column5: {
        id: 'column5',
        tripItemIds: [],
      },
    },
    columnOrder: ['column1', 'column2', 'column3', 'column4', 'column5'],
  })

  const originalThreeColumns = {
    column1: {
      id: 'column1',
      tripItemIds: [],
    },
    column2: {
      id: 'column2',
      tripItemIds: [],
    },
    column3: {
      id: 'column3',
      tripItemIds: [],
    },
  }

  const originalFiveColumns = {
    column1: {
      id: 'column1',
      tripItemIds: [],
    },
    column2: {
      id: 'column2',
      tripItemIds: [],
    },
    column3: {
      id: 'column3',
      tripItemIds: [],
    },
    column4: {
      id: 'column4',
      tripItemIds: [],
    },
    column5: {
      id: 'column5',
      tripItemIds: [],
    },
  }

  const threeColumnOrder = ['column1', 'column2', 'column3']
  const fiveColumnOrder = [
    'column1',
    'column2',
    'column3',
    'column4',
    'column5',
  ]

  /**
   * Turn the grid from 3-to-5 or 5-to-3 column orientation when
   * user toggles map and reorganize all trip items on the grid.
   *
   * TODO: currently there is an react-hooks/exhaustive-deps warning
   * TODO: which I can't figure out. adding any deps creates an infinite loop
   */
  const onToggleMap = useCallback(
    (originalColumns, maxColLength, columnOrder) => {
      const allTripItemsArr = Object.values(fakeTrips.columns)
      const valuesToMove = []

      let limit = 1

      let i = 0
      let j = 0
      let totalLengthOfAllItems = 0

      allTripItemsArr.forEach(
        item => (totalLengthOfAllItems += item.tripItemIds.length),
      )

      while (valuesToMove.length < totalLengthOfAllItems) {
        if (i > allTripItemsArr.length - 1) {
          i = 0
          limit += 1
        }
        j = limit - 1
        while (j < limit) {
          const val = allTripItemsArr[i].tripItemIds[j]
          if (val) {
            valuesToMove.push(val)
          }
          j++
        }
        i++
      }

      let x = 1
      i = 0
      while (i < totalLengthOfAllItems) {
        if (x === maxColLength) x = 1
        originalColumns[`column${x}`].tripItemIds.push(valuesToMove[i])
        x += 1
        i += 1
      }

      const updatedTripsObject = {
        ...fakeTrips,
        columns: {
          ...{},
          ...originalColumns,
        },
        columnOrder: [...[], ...columnOrder],
      }
      setFakeTrips(updatedTripsObject)
    },
    [ // fakeTrips ],
  )

  useEffect(() => {
    console.log('showMap', showMap)

    if (showMap) onToggleMap(originalThreeColumns, 4, threeColumnOrder)
    else if (showMap !== null)
      onToggleMap(originalFiveColumns, 6, fiveColumnOrder)

    console.log('fakeTrips', fakeTrips)

  }, [
    onAddNewTripItem,
    onToggleMap,
    // showMap,
    // originalThreeColumns,
    // originalFiveColumns,
    // threeColumnOrder,
    // fiveColumnOrder,
    // fakeTrips,
  ])

...

These are the warnings I am seeing.

  Line 283:5:   React Hook useCallback has a missing dependency: 'fakeTrips'. Either include it or remove the dependency array                                                                                                       react-hooks/exhaustive-deps
  Line 296:6:   React Hook useEffect has missing dependencies: 'fakeTrips', 'fiveColumnOrder', 'originalFiveColumns', 'originalThreeColumns', 'showMap', and 'threeColumnOrder'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

React hooks - adding exhaustive dependecies to useCallback/useEffect causes infinite loop

0 Answers0