regression: formsy's validations prop uses stale values from higher scope (props and state are frozen in the state in which it mounted)

[blurymind]

I observed this after upgrading from 1.1.4 to 2.3.2

If you try to pass state or props to custom validations functions - they are no longer a reference to the live values but are instead static values of the initial mount.

I made a minimal example here to try
https://codesandbox.io/p/sandbox/2m4j5p

In case you cant open codesandbox

import { useState, useEffect } from "react";
import Formsy, { withFormsy } from "formsy-react";

const Input = ({ errorMessage, value, type, setValue }) => {
  const onChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <input onChange={onChange} value={value} type={type} />
      <span>{errorMessage}</span>
    </div>
  );
};
const FormsyInput = withFormsy(Input);
export default function App() {
  const [timer, setTimer] = useState(0);
  const [canSubmit, setCanSubmit] = useState(false);
  const disableButton = () => {
    setCanSubmit(false);
  };

  const enableButton = () => {
    setCanSubmit(true);
  };

  const submit = (model) => {
    fetch("http://example.com/", {
      method: "post",
      body: JSON.stringify(model),
    });
  };

  useEffect(() => {
    setInterval(() => {
      // console.log("timer");
      setTimer((prev) => prev + 0.5);
    }, 1000);
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Formsy
        onValidSubmit={submit}
        onValid={enableButton}
        onInvalid={disableButton}
      >
        <FormsyInput
          name="timer"
          validations={{
            isTimer: (values, value) => {
              // BUG - timer no longer updates <-------------------
              console.log({ value, timer });
              // Props or State from a higher scope are frozen in theit value during mount
              return value && value > parseInt(timer);
            },
          }}
          validationErrors={{ isTimer: "Value is lower than timer" }}
          required
          type="number"
        />
        <button type="submit" disabled={!canSubmit}>
          can submit if value is higher than timer
        </button>
      </Formsy>
      {timer}
    </div>
  );
}

[blurymind]

I am guessing this is a bug in https://github.com/formsy/formsy-react/blob/master/src/utils.ts#L60 ? Could try to pr a fix if it would be a welcome improvement

I can see that the validations prop does update when this returns false? https://github.com/formsy/formsy-react/blob/master/src/withFormsy.ts#L184

on ln74 you are converting the function into a string to check if it changes?
https://github.com/formsy/formsy-react/blob/master/src/utils.ts#L74
this is going to completely ignore the variables that change value in memory.

I am not sure if the old one did that too or how it did that, but it would be nice if this was optional at lest.

React is going to re-render it anyway if you pass it as anonymous object to the prop. The react way to do this is by using useCallback, not converting functions to strings :(

I think functions should be skipped in this check and instead be memoized by the parent component.. unless there is some other way to do this nicely. But the current way breaks an important functionality and severely handicaps this component imo. Can we at least have a way of opting out of this for this prop?

maybe a prop called skipMemoizationOnProp?
skipMemoizationOnProp="validations"
or
skipMemoizationOnValidationsProp={true}
or
skipMemoizationOnValidationsProp="isTimer,someOther"

I am making a wild guess here btw, would need to sit down and mess with it for a while to be sure, but dont want to invest any time if it wont be a welcome fix

[blurymind]

I tested this theory and commenting that line out does make the validation with higher scope variables work again. Would love to make a pr if such change is welcome

Edit: but causes infinite loop in some cases. How did 1.4 do it while still having access to the higher scope?