CODEWITHSUNDEEP
reactjsreduxreact-reduxmemoizationreselect
Will
Will

Reputation: 319

Redux UseSelect hook keeps re-rendering

I've created three useSelector hooks and for the first one I change the value by dispatching an action with an OnClick function. When I do this my other useSelects get re-rendered even though the reference hasn't changed. Does anyone know why this is happening? I believe this is happening because I put console.logs inside the useSelectors and see them get fired off every time I click the button. minedDiamond should be the only value to change when I click the button.

Minecraft.js

import React, { useEffect, useCallback } from "react";
import { connect, useSelector, useDispatch, shallowEqual } from "react-redux";
import { mineDiamond, fetchMinecraftItems } from "../redux/diamonds/actions";


const Minecraft = () => {
  const loading = useSelector((state) => {
    console.log("loading output");
    return state.diamond.loading;
  });
  let minedDiamond = useSelector((state) => {
    console.log("diamond output");
    return state.diamond.minedDiamond;
  });
 const names = useSelector((state) => {
    console.log("name rendered");
    let data = state.diamond.minecraftData;
    return data.map((i) => i.name);
  });
  const dispatch = useDispatch();
  const handleClick = () => dispatch(mineDiamond((minedDiamond += 1)));

  useEffect(() => {
    dispatch(fetchMinecraftItems());
  }, []);
  console.log({ loading });
  return (
    <div className="wrapper">
      <div className="wrapper__item">
        <img src="/image/pickaxe.png" alt="diamond" />
        <button onClick={handleClick} type="button" className="wrapper__button">
          Mine
          <span role="img" aria-label="cart">
            🛒
          </span>
        </button>
      </div>
      <div className="wrapper__item">
        <img src="/image/diamond.png" alt="axe" />
        <span className="num">{minedDiamond}</span>
      </div>
      <div className="num">
        {loading ? (
          <p>loading...</p>
        ) : (
          <h1 className="num">{names}</h1>
        )}
      </div>
    </div>
  );
};

export default Minecraft;

Action Creators

import * as Actions from "./actionTypes";
import axios from "axios";

//action creator
export const mineDiamond = (addDiamond) => ({
  type: Actions.MINE_DIAMOND,
  payload: addDiamond,
});

export function fetchMinecraftItems() {
  return function (dispatch) {
    dispatch({ type: Actions.MINECRAFT_DATA_FETCH });
    return fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())

      .then((json) => {
        dispatch({ type: Actions.MINECRAFT_DATA_SUCCESS, payload: json });
      })
      .catch((err) =>
        dispatch({ type: Actions.MINECRAFT_DATA_FAIL, payload: err })
      );
  };
}

Reducer

import * as Actions from "./actionTypes";

//reducer holds initial state
const initialState = {
  minedDiamond: 0,
  minecraftData: [],
  loading: false,
  error: null,
};

//reducer
const diamondReducer = (state = initialState, action) => {
  switch (action.type) {
    case Actions.MINE_DIAMOND:
      return {
        ...state,
        minedDiamond: action.payload,
      };
    case Actions.MINECRAFT_DATA_FETCH:
      return {
        ...state,
        loading: true,
      };
    case Actions.MINECRAFT_DATA_SUCCESS:
      return {
        ...state,
        loading: false,
        minecraftData: action.payload,
      };
    case Actions.MINECRAFT_DATA_FAIL:
      return {
        ...state,
        error: action.payload,
      };
    default:
      return state;
  }
};

export default diamondReducer;

Upvotes: 0

Views: 707

Answers (1)

Niels Mokkenstorm
Niels Mokkenstorm

Reputation: 21

Your issue has nothing to do with the usage of console.log. Would you kindly include the code for your action creators and reducers?

Assuming state.diamond.mincraftdata is an array, the line 

return data.map((i) => i.name);

creates a new array every time the selector is run. As per the react-redux docs:

when an action is dispatched to the Redux store, useSelector() only forces a re-render if the selector result appears to be different than the last result. As of v7.1.0-alpha.5, the default comparison is a strict === reference comparison.

Upvotes: 2

Related Questions