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() {
...
Source: stackoverflow.com
Related Query
- Creating controlled inputs with HOC in React
- React slow with multiple controlled text inputs
- React - Autosaving blog post to sessionStorage() with controlled inputs
- How to handle multiple controlled inputs with react es6?
- React - Creating a form with a dynamic number of inputs
- Handle a lot of controlled inputs with React
- Cannot find namespace 'ctx' error when creating Context with react - typescript
- Exporting React component with multiple HOC wrappers?
- Typescript with React - use HOC on a generic component class
- React Redux use HOC with connected component
- How to create a controlled input with empty default in React 15
- How to handle props injected by HOC in React with Typescript?
- Redux form with self creating inputs
- Getting error when creating React HOC in Typescript
- Does still make sense to use HOC with React Hooks?
- React rebuild tree with HOC components (causing input field focus loss)
- React Controlled vs Uncontrolled inputs
- "Invalid hook call" when mocking React HOC with Jest
- "Invalid hook call" when mocking React HOC with Jest
- Stateless React components with controlled input
- react formik - fill form inputs with data after http request
- HoC with React Hooks
- optional controlled / uncontrolled React component with conditional React hooks
- Creating reusable Button Component with React and Typescript with not assignable type error
- React creating dynamically refs with Typescript
- having an issue creating new react app with create-react-app
- Using React.memo with hooks for controlled inputs
- Creating anchor with onClick that React handles
- React - Draggable components with inputs lose the ability to focus when clicking that input
- Create React App with Storybook creating webpack issue
More Query from same tag
- Cannot read properties of null (reading 'pulsate') in material-ui Button component
- Complex conditionals for classNames in React
- React PWA not installable
- Next/image doesn't load my src image when I use a map
- How to pass callback functions to parent
- Trying to set state using useContext values
- how in react-table v-7 add subRow with different value?
- I have a props with JSX.Element. How do I mock the same in the jest test
- React.js this.props.data.map() is not a function
- supportedChain is deprecated, please pass networks instead
- Serving react over static server without having people running into 404
- Ref.Current is Undefined
- HTML Component not rendering in electron react app
- Sending Data from React to MySQL
- How can I use Dispatch inside component
- Could not find an open port at x86_64-conda_cos6-linux-gnu
- How to reference a javascript variable to be the value of the props of a component?
- How to update a single value of an object that is inside an array of objects
- How to filter the same id as the URL Params?
- Is it possible to infer the type of component properties based on parent component?
- Maximum update depth exceeded with useLayoutEffect, useRef
- constant export doesn't work on react application
- How can I add custom props to an Option using React Select?
- React Show a List Of Buttons on Button click
- React hook - onFocus and onBlur
- How to create a delay in React.js
- Reactjs map grid using Semantic-ui-react package
- trying to render a button for a portal in react and get this error: × TypeError: Object(...) is not a function on the modalwrapper style
- Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@babel/plugin-preset-react' imported from
- Prevent Caching on a specific RTK Query Endpoint