![]() ![]() We didn’t see any immediate improvements in the interaction we were optimizing, but we expect this to reduce rerenders in a few other places. They would benefit from this optimization, so we’re gradually implementing it. Only the onChange callback needs it – and we can safely delay the editorModel read until then.Ĭausal has a bunch of components using useCallback and useSelector like above. But we don’t need to, either! The component output doesn’t rely on the EditorModelstate. Also, unlike useSelector(), useStore() can’t trigger a component render.Unlike useSelector(), useStore() returns the full store object.This approach relies on Redux’s useStore( ) hook. ![]() That’s cheap in smaller apps but scales really, really poorly as your app grows.Īnd some of these computations are not really memorizable:Ĭonst editorModel = store.getState().editorModel If we don’t do that, some components will rerender unnecessarily. To make the code fast, we need to remember to memoize most computations – both in components (with UseMemo and UseCallback) and in Redux selectors (with reselect). ![]() React and Redux don’t help us to fall into a pit of success. With React and Redux, the code we write by default is not performant. Others (like update 4, which rebuilds the model but doesn’t change anything) may be fixed by adding extra memoized selectors or comparison checks.īut there’s also a deeper, fundamental issue that is harder to fix. Some of these updates are caused by suboptimal Redux sagas (which we’re fixing). One category update causes four EditorModel updates. variableDimensionsLookup changes similarly (not shown). As you see, a single change causes four consecutive updates. This is how EditorModel changes if you update a single category value from 69210to 5. So why don’t we make AG Grid do this? Using yarn patch, let’s patch the package to eliminate the extra render: If AG Grid called setRowCtrlsOrdered immediately at step 2 instead of 5, we’d be able to avoid an extra render.
0 Comments
Leave a Reply. |