score:0
really slow down the application when i'm writing some text in input fields.
this is because you're tying the form's data to the rendering. it would be fine to store the whole form through redux as well (or wherever else you want), as long as you're not creating a dependency between the component's rendering lifecycle and those mutations in the form field's values.
does the whole form need to update on each individual components' events? not really. however, since the whole form is gathered in one big object, and that object's reference is changed after an update, then the whole component tree gets re-rendered.
to reduce the need for re-rendering, you can synchronize the data (note: the data, not the validations, etc...) outside of react, and only fetch it when you submit.
import react, { usestate } from "react";
const externalformdata = {};
function form() {
return (
<input
onchange={function(ev) {
externalformdata.input = ev.target.value;
}}
/>
);
}
export default function app() {
const [formdata, setformdata] = usestate();
return (
<div>
<form />
<input
type={"button"}
onclick={function() {
setformdata(externalformdata);
}}
value="submit form"
/>
<p>{`submitted form is: ${json.stringify(formdata)}`}</p>
</div>
);
}
if that's your choice, i suggest looking for some existing form library which handles that for you (including validation and etc).
another idea would be decoupling this "big object" you mentioned into individual objects which gets updated separately, thus only triggering re-renders on the components affected by the value.
Source: stackoverflow.com
Related Query
- Best way to pass huge object from children to parent?
- React: Best way to update self, but prevent children from updating?
- React what's the right way to get a parent props from its children
- Ist there a way to pass data from child to parent using Hooks?
- Pass an object from child to parent component in React
- If a function updates a state variable which is an object and is called from a child component, what's the best way to avoid infinite renders?
- Pass values from children to parent component
- Is it possible to pass "this.state" object from child to parent component using function parameters?
- React + Material UI - Best way to prevent child tree from remount when toggling parent theme
- How do I pass my click handler from parent to children correctly?
- What is the best way convert object keys from snake case to camel case and vice versa?
- the best way to pass initial state with configureStore after migration from react-redux to redux-toolkit
- Extract string from object and pass it to parent function - Typescript , React
- Best way to pass single data string from an action to a component React/Redux/ES6
- How to pass state from child to parent by right way in React
- best way to change value of an object from an array of objects when given a key
- Best way to return full object made from data from different APIs
- React: Pass state or data from parent to child component which is in object
- Best way to recieve props from child to parent react component
- What is the correct way to pass an argument to parent component in React from onClick event handler
- What's the proper way to grab an object from my Entities dictionary in a Normalized state and pass it to a component?
- Pass JSON object from child component to parent component
- What is the best way to pass an object's data from one page to another in Ionic?
- Pass data from parent to child and sibling children using context api
- calling and pass arguments to children component's function from parent component in reactjs
- How to pass object from parent to child class
- How to pass updated array object to parent component from child component in reactJs
- Best way to pass object to child component
- How do I pass state from a parent (wrapper component) to its children with react-router?
- Best way to pass data back from class to react component?
More Query from same tag
- Can't pass a parameter through onClick
- Node Express paths are not being matched on production (Heroku)
- How render specific data from axios call in Reactjs
- Update global state in targeted component without rerendering components that share global state
- How to filter in array of objects by the text provided by user in search box?
- React: Can the global state of the stores be manipulated in the browser?
- What does this piece of code mean when setting state?
- ConnectedRouter TypeError: Cannot read property 'dispatch' of undefined
- React javascript syntax error on question mark and dot
- ReactJS How to use withRouter inside app.js
- Is there a quick option to save the JWT token secure?
- Clear input field using React hooks
- GitHub gh-pages to work with the app domain name?
- How to use ReactJS to give immediate feedback to user before a long operation?
- How to get utility function from helper file on node.js server?
- Is it possible to return and display a component using a callback function in setState?
- How to fetch repeatedly and render updated api data in reactjs?
- React performance: bind vs anonymous function
- Enable to update my table after an edit with react data grid
- With React-Router, can you set an "outer" component to render at every route?
- TypeError: Cannot read property 'map' of undefined react component
- How to redirect to parent component
- How to filter value based on the nested array value?
- React Navbar links not responding
- How to delete item from an array by onPress event in react
- Prevent componentDidMount from fetching data if already available from server-side
- Warning: Received `true` for a non-boolean attribute `error`
- How can I bypass React's useEffect() "missing dependency" warning?
- Handling optional function props - defaultProps or check prop exists?
- Obtaining drop coordinates in react dnd