Pass block attributes without rerending tree

  • Hey, we’re building out some pretty advanced blocks for Gutenberg which involves the editor block having many child components. We’re noticing that currently it seems the only way for child components to get the block attributes is to pass down the attributes as a prop. However this means that if any attribute is updated, the entire tree is re-rendered. Is there a better way for child components to directly access and update relevant block attributes? Trying to avoid overriding shouldComponentUpdate for every child component (there’s like 16+)

    Normally with redux applications this is avoided since every component has access to the global state, so you don’t need to pass props down the entire tree. Since Gutenberg relies on redux, is there a way to get and update a blocks attributes directly with the underlying redux store?

    Thanks.

    • This topic was modified 5 years, 11 months ago by spuds10.
Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @spuds10,

    When you mention Redux, I guess you’re talking about optimizations within the connect function from React-Redux, which I believe will prevent child component re-rendering if it detects no changes to the calculated props.

    There are various data modules within Gutenberg that are exposed to implementors, but as far as I know, none of them are really built specifically to help block builders with performance. There are some API docs in the handbook:
    Gutenberg Handbook | Data Module Reference

    I personally wouldn’t consider 16+ components a lot unless you’re doing something computationally expensive. If you’re particularly concerned about performance I’d recommend using React.memo or PureComponent to prevent re-renders, and only pass individual attributes through to your child components as props to aid with the memoization:
    https://reactjs.org/docs/react-api.html#reactpurecomponent

    Building your own higher-order-component to help with this could also be an option.

    Thread Starter spuds10

    (@spuds10)

    Hey! Thanks for the response. Yea so after posting this I realized it was a design error on our part. Components should only (in my opinion) only get props that they absolutely need. The block attributes were being passed down to almost all of those components for easier access to attributes but that was really unnecessary.

    So I refactored all of those blocks to be pure components and to only take attributes they need and it is now smooth like butter.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Pass block attributes without rerending tree’ is closed to new replies.