react-hooks/exhaustive-deps 警告还是无限循环？

Question

I have a mediaType variable, when it change, currentSelectedMedia need to be filtered. In this scenario, I get react-hooks/exhaustive-deps warning.

  /**
  data example:

  currentSelectedMedia = [
    { id: '1', mediaType: '1', name: 'facebook'},
    { id: '2', mediaType: '2', name: 'twitter'}
  ]
  **/

  useEffect(() => {
    setCurrentSelectedMedia(currentSelectedMedia.filter(item => item.mediaType === mediaType))
  }, [mediaType])

If I add currentSelectedMedia to the dependency array，infinite loop is caused.

the warning is right according to the rule, the reason of infinite loop is also obvious. But how can I get escape?

Answer 1

You are getting react-hooks/exhaustive-deps warning or infinite loop because your useEffect hook gets trigger every time there is a change in mediaType state; And in your useEffect method you are setting the value of mediaType state;

To solve this problem either you can have two different state or just a normal function which sets the mediaType or just create a variable which filters the data when your state gets change. That depends on how you are setting your mediaType state from other places.

const filteredData = currentSelectedMedia.filter(item => item.mediaType === mediaType);

Use filteredData to render the data.

Answer 2

I believe what you want is getting the filtered selected media.

However, using useEffect in this instance may not be the most appropriate. You may want to consider useMemo instead.

const filteredMedia = useMemo(() => {
    return currentSelectedMedia.filter(item => item.mediaType === mediaType)
}, [currentSelectedMedia, mediaType] )

You may then use filteredMedia in your rendering.

The value will only be re-filtered when currentSelectedMedia or mediaType changed.

The above is almost equivalent to

 const filteredMedia = currentSelectedMedia.filter(item => item.mediaType === mediaType)

The difference is - useMemo is "memorized", so it won't be recalculated on every render.

Small performance difference for small arrays and calculation, visible performance boost when you are handling huge list and complicated calculations.

Answer 3

useEffect will trigger on mount and each time one of it's dependencies change. If you add currentSelectedMedia to it's dependency list and you are also modifying currentSelectedMedia within your useEffect causing the infinite loop.

I would simply use the same logic that would change mediaType (most likely an [action]Handler function) and setCurrentSelectedMedia there.