React Hook useEffect 缺少依赖，使用 Redux

Question

Should I ignore 'React Hook useEffect has a missing dependency' warning? Usually when I am getting data from an API this is what I do:

const Component = () => {
  const [data,setData] = useState([]);

  const getData = () => {
    //Getting data and set data code...
  }

  useEffect(()=>{
   getData();
  },[]);
}

and recently I am trying out use redux to do the same thing(getting data from API) and I got this 'React Hook useEffect has a missing dependency' warning...

action:

import {GET_POSTS} from './types';

const getPosts = () => (dispatch) => {
    const url = 'https://jsonplaceholder.typicode.com/posts';
    fetch(url)
    .then(res => res.json())
    .then(data => {
        dispatch({
            type: GET_POSTS,
            payload: data
        });
    });
}

export default getPosts;

reducer:

import {GET_POSTS} from '../actions/types';

const initialState = {
    posts: []
}

const postsReducer = (state = initialState, action) => {
    switch(action.type){
        case GET_POSTS:
            return {
                ...state,
                posts: action.payload
            }
        default:
            return state;
    }
}

export default postsReducer;

app.js:

import React, {useEffect} from 'react';
import {connect} from 'react-redux';
import Hello from './components/Hello';
import getPost from './actions/postsAction';
import './App.css';

const App = ({getPost, dispatch}) => {
  useEffect(() => {
    getPost();
  },[]);

  return (
    <div className='App'>
      <Hello/>
    </div>
  );
};

const mapdispatchtoprops = (dispatch) => ({
  dispatch,
  getPost: () => {
    dispatch(getPost());
  }
});

export default connect(null, mapdispatchtoprops)(App);

Is there a way to fix this problem, I have tried to put dispatch inside the useEffect array but the warning still shows, like this:

  useEffect(() => {
    getPost();
  },[dispatch]);

This is the full warning: React Hook useEffect has a missing dependency: 'getPost'. Either include it or remove the dependency array react-hooks/exhaustive-deps

Tried to remove the useEffect array but I'll get infinite loop, it'll just keeps getting the data from the api(I only need it to run once).

Should I ignore the warning? if not, whats the best practice way to handle this problem?

I never got this kind of warning before when I left the useEffect array empty but got it recently, why?

Answer 1

The error message is telling you what you to do. Just add getData to the dependencies array like so: [dispatch, getData] . Anything external you reference within your useEffect (like a function) should be part of the dependency list so it can trigger the effect whenever the value changes. In your case it likely won't, but React is warning you just to be safe. Hope that helps!

Answer 2

You may want to start thinking from a different perspective. You are apparently trying to do side effect of loading data after component got rendered. So just inject your data via redux or propagation props from parent and remove array altogether. Ie

 const Component = ({posts}) => {

  const getData = () => {
    //Getting data and set data code...
  }

  useEffect(() => {
      if (!posts) {
       getData();
      }
  });
  ....
}

Your posts will be loaded once and useEffect's function should only care about posts is there or not.