I have a component with about 16 input fields. The component itself is quite complex. The problem is that every time it updates the state of the form on input change it triggers a re-render. Rendering that component is a bit expensive, there is a short delay noticeable when you type a character inside an input.
What is best practice in such a case?
Maybe I should update the state only when the user submits the form?
if you don't want to use any other library that manages form state,
you can move the form to another component, in this case only the child component that conains your form will rerender on changing inputs values, not the parent component, and pass to it the function that handles submit in props to trigger changes in the parent component when you submit the form
Related
I have a child component sitting inside a parent component. Parent component has some information, say I, which keeps changing based on user actions. In child component I have a button, and I want to change state of this button based on current value of I.
What is idiomatic way of doing it in scalajs-react/React?
Pass it via props and optionally use Reusability to prevent the child components from needlessly re-rendering too often.
I create 2 Text Boxes one with hook and the another one with the old style, now in Hook mode when the user input change the textbox value the whole page rendered, but with old style there only the text-box rendered not the whole page, if you have the complex page with many objects like (Data Table, form, buttons, inputs, etc..) the single change on one of these components forced to re-render everything and it decease performance, for example typing in the text-box take time to effect on page and the delay time is more than user typing speed.
the one workaround solution is using the callbacks and useMem but if the page is complex(lots of objects as described, and all of these objects has many properties the callback and useMem is very very complicated to handle single object property.
SandBox Example
This is exactly how react hooks should work. what will cause a rerender in react? two things:
change in props
change in hooks or say in a better way hooks state
in the second case, the useInput state is changing so that causes a rerender and it's absolutely normal behavior. I think using custom hook in that way is not a good practice.
I recommend reading this article for more information on react rendering: https://www.codebeast.dev/usestate-vs-useref-re-render-or-not/
I have a component with children. I would like these to be shown or not depending on the press of a button. I can do this by creating a state variable childrenVisible, and then rendering or not depending on it.
But I have noticed that if I have state on a child Component it will get reset when toggling childrenVisible. I think this is because components gets destroyed when not rendered on a re-render.
I would like to keep the elements around, so I can keep their state, but just hide them depending on childrenVisible. Is this possible in React?
What is the best practice to implement a multi step form?
I know that there are several different practices, but which one is the best/most performant ?
Redux/Global state management: Easiest but bad for performance, because it will check every connected component on every key hit.
Raised State: Have a parent component keeping all state, but this couples the components too close together and makes the parent component too complex
Render props: The child components render the next button of the form as a render prop and push their data to the parent on next click => this makes the parent complex as well and it may be difficult to pass the data to the parent.
What are your thoughts? Thanks in advance!!
I would go for the second option, because it keeps the children simple and dumb (MVC).
The parent component keeps track of all data and which form is currently displayed, which keeps all logic within one component (which makes it easy to update).
Performance won't be a problem, because it only displays one form anyway, so the performance is the same as if using a single form.
I'm using react-hooks. So there is a modal that pops up with a bunch of inputs (components) like text fields, drop-downs, date pickers and etc...
The problem is when some field is being edited, all my form components are being re-rendered and that makes my form very slow. I totally understand why it happens. However, I would like to find a way when I edit some input within my form, all other input fields (components) should stay "frozen" and not re-rendered. Otherwise, working with my form which has at least 20 input fields, would make the work very slow...
Your assistance is appreciated!
You can use Uncontrolled components. It doesn't use setState, so it won't be re-rendered when you type some input value. Then you can send everything when you submit your form.
Try using React.memo which is in some way an equivalent to shouldComponentUpdate
Check React.memo documentation