Context value is logged 100x times

Issue

I'm currently working on a project that makes use of server sent events. I'm trying to update components once change is detected. This works however some weird logs happen. When i try to log a message that says if the user is logged in, a card is inserted or when the user logs out, the following logs come in my terminal.

The first log happens 100x times

LOG  {"errorLevel": 0, "messageId": "Z026", "text": "Good bye, see you soon"}
LOG  {"errorLevel": 0, "messageId": "Z026", "text": "Good bye, see you soon"}
LOG  {"errorLevel": 0, "messageId": "Z026", "text": "Good bye, see you soon"}
LOG  {"errorLevel": 0, "messageId": "Z026", "text": "Good bye, see you soon"}
LOG  {"errorLevel": 0, "messageId": "Z026", "text": "Good bye, see you soon"}
LOG  {"errorLevel": 0, "messageId": "Z026", "text": "Good bye, see you soon"}
LOG  {"errorLevel": 0, "messageId": "Z026", "text": "Good bye, see you soon"}
LOG  {"errorLevel": 0, "messageId": "Z026", "text": "Good bye, see you soon"}
LOG  {"errorLevel": 0, "messageId": "Z026", "text": "Good bye, see you soon"}
LOG  {"errorLevel": 0, "messageId": "Z026", "text": "Good bye, see you soon"}
LOG  {"errorLevel": 0, "messageId": "Z026", "text": "Good bye, see you soon"}
LOG  {"errorLevel": 0, "messageId": "Z026", "text": "Good bye, see you soon"}
LOG  {"errorLevel": 0, "messageId": "Z026", "text": "Good bye, see you soon"}
LOG  {"errorLevel": 0, "messageId": "Z026", "text": "Good bye, see you soon"}
LOG  {"errorLevel": 6, "messageId": "", "text": ""}
LOG  {"errorLevel": 6, "messageId": "", "text": ""}
PayloadTooLargeError: request entity too large
at readStream (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/raw-body/index.js:167:7)
at getRawBody (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/raw-body/index.js:119:12)
at read (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/body-parser/lib/read.js:79:3)
at jsonParser (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/body-parser/lib/types/json.js:138:5)
at call (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/connect/index.js:239:7)
at next (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/connect/index.js:183:5)
at remoteDevtoolsCorsMiddleware (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/@expo/dev-server/build/middleware/remoteDevtoolsCorsMiddleware.js:36:3)
at call (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/connect/index.js:239:7)
at next (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/connect/index.js:183:5)
at serveStatic (/Users/michielvandam/Desktop/DRGT/drInfokiosk/node_modules/serve-static/index.js:75:16)

This is my Message component where i log it from

   const Message: FunctionComponent = () => {
     const { cardError } = useJPContext();

     console.log(cardError);

     const [showMessage, setShowMessage] = useState(false);

     useEffect(
    () => {
      if (cardError.text !== "") {
        setShowMessage(true);
      } else {
        setShowMessage(false);
      }
    },
    [cardError.text]
  );

  return (
    <MessageBox style={{ display: showMessage ? "flex" : "none" }}>
      <MessageBoxText>
        {cardError.text}
      </MessageBoxText>
      <MessageBoxCode>
        {cardError.messageId}
      </MessageBoxCode>
    </MessageBox>
  );
};

export default memo(Message);

And the following is my Context where i store and get the data from

const JPContextProviderMemo = ({ children }) => {
  const [pointsData, setPointsData] = useState(standardPointsLimit);
  const [userData, setUserData] = useState(standardLoginData);
  const [cardError, setCardError] = useState({
    errorLevel: 0,
    messageId: "",
    text: ""
  });

  const updatePointsLimit = d => {
    const data = d;
    setPointsData(data);
  };

  const updateUserData = d => {
    const updatedUserData = d;
    setUserData(updatedUserData);
  };

  const updateCardError = d => {
    const cardError = d;
    setCardError(cardError);
  };

  return (
    <JpContext.Provider
      value={{
        pointsData,
        updatePointsLimit,
        userData,
        updateUserData,
        cardError,
        updateCardError
      }}
    >
      {children}
    </JpContext.Provider>
  );
};

export const JPContextProvider = memo(JPContextProviderMemo);

I hope you can help me and thanks in advance!

Solution

I found the error. There was no empty dependency array at my useEffect... It works now.

Answered By - Thomasino73