React.useRef is returning empty string about why-did-you-render

[vzaidman]

what version of react do you use?

[paramsinghvc]

16.8.6.

[vzaidman]

how "TakeNotes " looks like?

[paramsinghvc]

import React, {
  useMemo,
  useState,
  useEffect,
  useRef,
  useCallback
} from "react";

import * as utils from "src/shared/utils";
import ChartData from "./data";
import useSlipper from "@dp-ui/utils/dist/useSlipper";
import useRedux from "@dp-ui/utils/dist/redux-hooks";
import { fetchHome } from "../Home/home.redux";
import { Layout, Container } from "./styles";
import safeGet from "@dp-ui/utils/dist/safeGet";
import { Icon } from "antd";

const TakeNotes = props => {
  const onSubmitHomeNavigator = useCallback((): void => {
    props.history.push("/");
  }, []);
  const { bigNumber, vCompare } = useMemo(
    () => utils.calculateData(ChartData.data),
    []
  );
  const [notes, setNotes] = useState("");
  const [submitFlag, setSubmitFlag] = useState(false);
  const notesRef = useRef<HTMLUListElement>(null);
  useSlipper(notesRef as React.MutableRefObject<HTMLUListElement>, {
    handleSelector: "slider"
  });
  const notesChangeHandler = text => {
    setNotes(text);
  };
  const prepareData = (mappedPropsData: any[]): any[] => {
    const data =
      mappedPropsData.filter(curr => {
        return curr.id === parseInt(props.match.params.notesID);
      })[0] || {};
    return safeGet(data, "notes", []);
  };

  const mappedProps = useRedux<any, any, any, {}>(s => s, { fetchHome });

  useEffect(() => {
    //action to load page data
    if (!mappedProps.pins.payload) mappedProps.fetchHome();
    safeGet(
      mappedProps,
      `mappedProps.pins.payload[${parseInt(props.match.params.notesID) ||
        0}].notes`,
      []
    );

    // eslint-disable-next-line no-console
    console.log("Mounted");
  }, []);
  return (
    <React.Fragment>
      <Layout className="layout">
        <Container>
          <div className="notesHeader">Take notes</div>
          <div className="navigationHome" onClick={onSubmitHomeNavigator}>
            DONE
          </div>
          <div className="notesArea" />
          <div className="discountedHeadersGroup">
            <div className="dailyTotalDiscountedOrders">
              DAILY - TOTAL DISCOUNTED ORDERS
            </div>
            <div className="daily">DAILY</div>
          </div>
          <div className="progressGroup">
            <div className="discountedOrderNumber">
              {Math.round((bigNumber / 1000) * 100) / 100}K
            </div>
            <div className="percentageGroup">
              <div
                className={
                  vCompare > 0 ? "chart-progress-up" : "chart-progress-down"
                }
              >
                {vCompare < 0 ? "▼" : "▲"}
              </div>
              <div
                className={
                  vCompare > 0 ? "wowPercentage-up" : "wowPercentage-down"
                }
              >
                {Math.round(vCompare * 100 * 100) / 100}% WOW
              </div>
            </div>
          </div>
          <div className="horzontalSeparator" />
          <div className="inputBoxNotes">
            <textarea
              className="inputAreaNotes"
              value={notes}
              onChange={evt => notesChangeHandler(evt.target.value)}
              maxLength={60}
              placeholder="write a note..."
              rows={6}
              cols={40}
              onFocus={() => setSubmitFlag(true)}
            />
            <div className="textLength">{notes.length}/60</div>
          </div>
          {submitFlag && (
            <div className="actionGroup">
              <div
                className="cancel"
                onClick={() => {
                  notesChangeHandler("");
                  setSubmitFlag(false);
                }}
              >
                <span className="cancelText">Cancel</span>
              </div>
              <div className="submit" onClick={() => null}>
                <span className="submitText">Submit</span>
              </div>
            </div>
          )}
          <div className="previousNotes">Previous notes</div>
          <div>
            <Icon type="close" />
          </div>
          >
          <ul className="notesList" ref={notesRef}>
            {mappedProps.pins.payload &&
              prepareData(mappedProps.pins.payload).map((curr, index) => {
                return (
                  <li className="noteRow" key={index} id={`${index}`}>
                    <div className="parallelRow">
                      <div className="row">
                        <div className="deleteRow">X</div>
                        <div className="noteData">
                          <span className="noteTitle">{curr.text}</span>
                          <span className="noteTimestamp">
                            {`${utils.dateUtility(curr.updatedAt).day} ${
                              utils.dateUtility(curr.updatedAt).month
                            } | 3.7K weekly`}
                          </span>
                        </div>
                        <div className="slider">E</div>
                      </div>
                      <div className="eachNoteSeparator" />
                    </div>
                  </li>
                );
              })}
          </ul>
        </Container>
      </Layout>
    </React.Fragment>
  );
};
TakeNotes.whyDidYouRender = true;
export default TakeNotes;

[paramsinghvc]

It's quite strange, why would React.useRef() return an empty string instead of a ref object?

[vzaidman]

Please provide a sandbox with a reproduction of this issue.
I couldn't figure out how could this happen.

[vzaidman]

This issue would be reopened when more information is provided.