galhavivi / cofi

JavaScript Form Solutions
https://galhavivi.github.io/cofi
Other
2 stars 1 forks source link

optimization of field render is missing some cache keys #8

Closed WangLarry closed 2 years ago

WangLarry commented 2 years ago
export default function createField(FieldView) {

  const Field = ({ id, ...customProps }) => {
    const [cachedProps, setCachedProps] = useState();
    const [cachedFieldView, setCachedFieldView] = useState((null));
    const { model, resources, actions } = useContext(FormContext);

    const props = mapFieldToProps(id, model, resources);

    // optimization prevent un-necessary field renders
    if (!isEqual(props, cachedProps)) {
      setCachedProps(props);
      setCachedFieldView(<FieldView
        {...customProps}
        {...props}
        onValueChange={value => actions.changeValue(id, value)}
        onStateChange={state => actions.changeState(id, state)}
      />);
    }

    return cachedFieldView;
  };

  Field.propTypes = {
    id: PropTypes.string.isRequired,
  };

  return Field;
}

if customProps or actions are changed, filed is not re-render.

galhavivi commented 2 years ago

About custom props - will be fixed, thank you for noticing :)

About actions changed - thats not a case, since the "changeValue" which is passed to the FieldView in an internal changeValue function of Form.js - the function which handles the change value lifecycle (its not an input from the user)