Dynamic cell formatting based on cell value - moving from V7

[m44kubica]

As I'm moving from the V7 version, I've faced an issue.

Dynamic cell formatting based on cell value is a feature that is vital for some columns I have. To be precise, I'm trying to compare previous cell value (number) with a new one, and

• set font as green, if the new one is greater than previous one,
• set font as red, if the new one is smaller previous one,
• or set font as black if the new value is the same as the previous one or the previous one is set to 0 (useRef hook).

However, after adjusting code to V8, what is happening, is that the text-color stays with the initial value (""). Even though while debugging I can see that the variable is changing, there is no reaction in the browser. className stays set to the initial value which is "" or whatever I change it to.

With V7 the way to go would be:

        Cell: (props: { value: number }) => {
          const currentValue = props.value;
          const prevValueRef = useRef<number>(0);
          useEffect(() => {
            prevValueRef.current = currentValue;
          });
          const prevValue = prevValueRef.current;
          const formatedCurrentValue = getFormattedAmount(currentValue);
          return (
            <div
              className={
                currentValue === prevValue || prevValue === 0
                  ? ""
                  : currentValue > prevValue
                  ? "text-green600"
                  : "text-red600"
              }
            >
              {formatedCurrentValue}
            </div>
          );
        }

Which I moved to:

  const ComparePreviousAndGetStyle = (currentValue: number) => {
    const prevValueRef = useRef<number>(0);
    useEffect(() => {
      prevValueRef.current = currentValue;
    });
    const prevValue = prevValueRef.current;

    if (currentValue === prevValue || prevValue === 0) return "";
    if (currentValue > prevValue) return "text-green600";
    if (currentValue < prevValue) return "text-red600";
    else return "";
  };

and

cell: ({ getValue }) => {
    const value = getValue<number>();
    const style = ComparePreviousAndGetStyle(value);
    return <div className={style}>{value}</div>;
},

My first thought was that there's an issue with usage of hooks, so I simplified the implementation.
I based the className value on a simple condition:

cell: ({ getValue }) => {
   const value = getValue<number>();

   return (
      <div
        className={value >= 0 ? "text-green600" : "text-red600"}>
        {value}
      </div>
   );
},

Even after that, the value gets initial formatting and stays with it.
E.g. something that was greater or equal as 0 gets formatted as green, and it stays green, even, if the value of the cell gets lower than 0.

Would anybody recommend something for that?

[RossCoeH]

Suggest you check how many times ComparePreviousAndGetStyle is being run. You are not using state to hold values between renders, and your useEffect has no dependencies, so useEffect will overwrite previous value with current if it is called twice on same cell.