反应钩子：显示从孩子加载微调器

Question

I'm new with React and I want to understand hooks.

Expected result : have 2 global functions to show/hide a loading spinner from anywhere in components tree.

Actual result : When I call showLoader and hideLoader in useEffect of ChildPage, it is looping on the render.

After reading several tutorials and many answers on this site, I would like to understand what's wrong in my code. (I have already tried Redux but I had the same result).

App.js

const StateProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider value={reducer}>{children}</StateContext.Provider>
);
export const useStateValue = () => useContext(StateContext);

const loaderReducer = (state = false, action) => {
  switch (action.type) {
    case "show_loader":
      return { isFetching: true };
    case "hide_loader":
      return { isFetching: false };
    default:
      throw new Error("Unexpected action");
  }
};

const App = props => {
  const initialState = { isFetching: false };

  const [state, dispatch] = useReducer(loaderReducer, initialState);

  return (
    <StateProvider initialState={initialState} reducer={{ dispatch }}>
      <div className="App">
        {state.isFetching ? (
          <ReactLoading
            className="loader"
            type="cylon"
            color="#4caf50"
            height={64}
            width={64}
          />
        ) : (
          <ChildPage />
        )}
      </div>
    </StateProvider>
  );
};

export default App;

StateContext.js

const StateContext = createContext(null);
export default StateContext;

childPage.js

const ChildPage = props => {
  const { dispatch } = useContext(StateContext);

  const showLoader = useCallback(() => dispatch({ type: "show_loader" }), []);
  const hideLoader = useCallback(() => dispatch({ type: "hide_loader" }), []);

  useEffect(() => {
    async function fetchExample() {
      showLoader();
      await fetch("https://jsonplaceholder.typicode.com/todos/1")
        .then(response => response.json())
        .then(json => console.log(json));
      hideLoader();
    }
    fetchExample();
  }, [showLoader, hideLoader]);
  //same thing with [] as second arg

  return (
    <div>
      <h1>hello in ChildPage</h1>
    </div>
  );
};

export default ChildPage;

Answer 1

Your ChildPage got destroyed while loading?

I've read your code. You used conditional expression to control the UI. That is the very reason you got loop renderings.

How to understand it?

Every time the Effect callback got invoked, showLoader is called which leads ChildPage to be unconstructed. After the fetch promise settled, hideLoader is called which leads ChildPage re-constructed and then the Effect callback will be applied.

You set a loop here. :)