score:0
the rows are updating because of the context is being updated as you type. look at the style
value.
const [styles, setstyles] = react.usestate({'a':'a', 'b':'b'})
const [inneroptions, setoptions] = react.usestate({})
const value = react.usememo(() => ({options: inneroptions, styles: styles}), [styles, inneroptions]);
also the item={[]}
prop on each row should be static(outside the component) or in state/memo/ref as this will also cause a rendering. im assuming this is here for simplicity.
a simple solution would be just to not use a global/root context(thats not stable) and to use memo/selectors or even something like reslect to create stable state slices for each type
then using react.memo to skip rendering when props are equal. the obvious downside is that you will need to prop drill those values down and that can get annoying. and probably why you decided to go with context in the first place. here is an untested example using a memoed selector.
const row = react.memo((props) => ...); // your row component now wrapped with memo.
// im injecting styles, options, ect so that you dont have to keep this code in
// the component because it makes the component code more focused.
// you could move this into a new file, put it directly inside your component, ect.
const selectrowtype = (type, styles, options) => {
const style = styles[type];
return usememo(() => {
return { options, style };
}, [style, options]);
};
<row type={selectrowtype('a', styles, inneroptions) items={...} />
<row type={selectrowtype('b', styles, inneroptions) items={...} />
a compromise could be to use a rowcontext
inside each row that way the cells and other row children can use context values derived by the type
and would be stable unless the observed type
changes in the parent. you would still need to preselect the values for each row type, but would avoid the prop drilling pain inside the <row />
boundary.
const default_row_context_value = {};
const rowcontext = createcontext(default_row_context_value );
// create a stable row context value.
// we can further enrich the context with row specific data here.
const selectrowcontextvalue = (props) => {
const { type, items } = props;
return usememo(() => {
return { type, items };
}, [type, items]);
};
const row = react.memo((props) => {
return (
<rowcontext.provider value={selectrowcontextvalue(props)}>
{...}
</rowcontext.provider>
);
});
<row type={selectrowtype('a', styles, inneroptions) items={...} />
<row type={selectrowtype('b', styles, inneroptions) items={...} />
if you have only <cell />
children and they arn't deep, then there really isn't a reason to use rowcontext
on every <row />
. it's up to you.
Source: stackoverflow.com
Related Query
- Update Component by reactivity way
- What is the 'proper' way to update a react component after an interval with hooks?
- Getting error "Cannot update a component while rendering a different component". What is the correct way to achieve what I'm attempting?
- Best way to update className based on react component state
- Proper way to update state in nested component
- Correct way of connecting Websocket events to update my React Component
- React - Cleanest way to re-render component on array update
- Is using callback for component state update from redux saga the right way
- Best way to update component after this handleClick?
- Correct way to update react component from secondary source
- Can't perform a React state update on an unmounted component
- React: why child component doesn't update when prop changes
- Update style of a component onScroll in React.js
- Update React component every second
- Cannot update a component while rendering a different component warning
- React useEffect causing: Can't perform a React state update on an unmounted component
- Whats the best way to update an object in an array in ReactJS?
- Is there a way to check if the react component is unmounted?
- React-hooks. Can't perform a React state update on an unmounted component
- React Warning: Cannot update a component from inside the function body of a different component
- is there any way to access the parent component instance in React?
- Update component state from outside React (on server response)
- How to test a prop update on React component
- Best way to create new React component using create-react-app
- What is the correct way of adding a dependency to react in your package.json for a react component
- Is there a right way to pass data into a React component from the HTML page?
- Update one of the objects in array, in an immutable way
- onChange event for React child component to update state
- Cleaner/shorter way to update nested state in Redux?
- Right way to update state in redux reducers
More Query from same tag
- Create function componente HOC with typescript
- How to edit data received from a rest call in react?
- Remove child component on click of link
- How do I rewrite a react component with decorators as a pure function?
- Display random text in React app with Math.random()
- Is there a method that converts screen coordinates into corresponding longitude and latitude values
- SetState error when user login returns errors
- How is React component's props updated asynchronously?
- Data is not displaying using Jest
- React typescript - object is possibly undefined
- How are Javascript widgets made without iFrames?
- Can React re-render only a portion of component?
- I have 2 states, but both are updating even though I only setState one of them
- javascript elseif case in JSX
- react - writting twice same test passes first but not second time
- Navigating directly to URL in Single Page Node App Results in 404
- Child Component doesn't rerender when state of parent component changes
- TypeError: firebase.auth() is not a function
- How do I use Colors in BlueprintJS?
- Using two props in a component
- react The slice reducer for key "mods" returned undefined during initialization. (redux)
- store my firestore value as number but it is being stored as string
- How do I stop my React application from continuously updating an element based on an input field?
- React Redux - app/store resets after added item to store
- Next js getServerSideProps redirect with props
- Change currency state from a default const object
- Meteor React renders twice after subscription are ready
- Should you dispatch or call next multiple times inside of a Redux middleware?
- Mocking a component method with Jest
- Gatsby Link not working with isPartially Active on MDX rendered pages