score:0

each render seems to be causing the original inputwrapper component to unmount. at this point it is because of this code const hoc = inputwrapper({}); - each time a render occurs on the parent, a new wrapper is generated. this is apparent during my experimentation:

export const inputwrapper = (v) => {
  const wrapper = (props) => {
    const { label, onchange, name, state } = props;

    useeffect(() => {
      return () => {
        console.log("unmounting"); // cleanup got invoked everytime i typed in the input
      };
    }, []);

codesandbox for the bug: https://codesandbox.io/s/react-input-hoc-bugged-e28iz?file=/src/withvalidationcomponent.js


to fix this, on the implementation side (i.e., on app component), i moved the wrapper instance outside of the function

import react, { usestate } from "react";
import {basicinputvalidation} from 'examples/basicinput.validation';
import {inputwrapper} from 'withvalidationcomponent';
import { curry } from 'ramda';
const hoc = inputwrapper({}); // <-- moved this here

function app() {
  ...

edit react input hoc - fixed


Related Query

More Query from same tag