Replace render functions with components

[kvet]

Starting with the initial release, our components and plugins contain "...Template" properties, which hold render functions. During alpha releases, we added many features providing rich customization capabilities. Now, many of those render functions are treated as React components: they can have children and an associated key property.
 
The Grid wraps each render function in the TemplateRenderer component to support passing an associated key property to this function. This causes creation of multiple TemplateRenderer components in the virtual DOM tree, which decreases performance. We are going to fix this problem. However, it will lead to a breaking change.
 

Suggested Change

 

• use ...Component properties that accept a component instead of ...Template properties that accept render functions
• support component overriding for a specific column for some properties (for example, tableCellComponent in TableView)
   

Difference between the Component and Render Function

 
Here is a property receiving a component:
 

<DataTypeProvider
  type="uppercase"
  valueFormatterComponent={ValueFormatter}
/>

const ValueFormatter = ({ value }) => {
  return <span>{value.toUpperCase()}</span>
}

 
and here is a render function:
 

<DataTypeProvider
  type="uppercase"
  // NOTE: it is possible to inline child component render
  valueFormatterRender={({ value }) => {
    return <span>{value}</span>
  }}
/>

 
If you use a property receiving a component, DataTypeProviter uses React.createElement to create a new React element based on the provided component. It means that if you pass a function to the component attribute, a new component is created each time the Grid is rendered. This causes redundant mounting and unmounting of the component instead of just updating it.
 

Passing a Render Function as a Component

 
We don't recommend passing a rendering function to a component property because of the issue described above. However, you can work around this limitation using any state management library. For example, Redux.
 
If you want to pass the rendering function to a component property and do not want to use a state management library, we advise you to use the following solution to avoid component unmounting.
 
The original code:
 

// NOTE: we need rows property in the following component,
// but it is not passed by React Grid
const TableRow = ({ children, row, rows }) => (
  <tr
    onClick={() => alert(rows.indexOf(row))}
  >
    {children}
  </tr>
);

export default class Demo extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      columns: [/* ... */],
      rows: [/* ... */],
    };
  }
  render() {
    const { rows, columns } = this.state;

    return (
      <Grid
        rows={rows}
        columns={columns}
      >
        <TableView
          tableRowComponent={TableRow}
        />
        <TableHeaderRow />
      </Grid>
    );
  }
}

 
Possible solution:
 

// NOTE: this function returns a memoized component
// that does not unmount component when render function is changed
const createRenderComponent = () => {
  let storedRender = () => null;
  const components = new Set();
  class RenderComponent extends React.Component {
    componentWillMount() {
      components.add(this);
    }
    componentWillUnmount() {
      components.delete(this);
    }
    render() {
      return storedRender(this.props);
    }
  }
  return (render) => {
    storedRender = render;
    Array.from(components.values())
      .forEach(component => component.forceUpdate());
    return RenderComponent;
  };
};

const TableRow = ({ children, row, rows }) => (
  <tr
    onClick={() => alert(rows.indexOf(row))}
  >
    {children}
  </tr>
);

export default class Demo extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      columns: [/* ... */],
      rows: [/* ... */],
    };
    
    // NOTE: you should create memoized render component in the constructor
    // in order to store it for several render method call
    this.rowRenderComponent = createRenderComponent();
  }
  render() {
    const { rows, columns } = this.state;

    return (
      <Grid
        rows={rows}
        columns={columns}
      >
        <TableView
          // NOTE: we pass rows to TableRow component
          tableRowComponent={
           this.rowRenderComponent(props => <TableRow {...props} rows={rows} />)
          }
        />
        <TableHeaderRow />
      </Grid>
    );
  }
}

[aislanmaia]

However, you can work around this limitation using any state management library. For example, Redux.

Is there some example how to do this with Redux?

Any prediction to release date of this breaking changes?
However, thanks for your work ❤️

[kvet]

Hi,
 
These changes will be available soon. An example with Redux will be in the "Featured Redux Integration" demo once we complete work.

[kvet]

We've released the 1.0.0-beta.2 version containing described changes.

[SergeyAlexeev]

We published a function that contains the possible solution described in the first post of this thread.

[elmeerr]

@SergeyAlexeev do you mind explaining how to use connectProps?

[DmitryBogomolov]

Usage of connectProps is shown in the Access the Parent Component’s State Correctly section.
In addition, refer to this issue.

[elmeerr]

@DmitryBogomolov Thanks!! that's what I needed. But I still have an issue (I hope you don't mind me asking here). I've created a custom TypeProvider for dropdown...everytime the select changes it loses focus (even with the approach you mentioned)

const SelectComponent = props => <SelectCell {...props} />

const SelectTypeProvider = props => {
    const SelectEditor = connectProps(SelectComponent, () => ({ options: props.options }))
    return <DataTypeProvider editorComponent={SelectEditor} for={props.for} />
}

I'm wondering if I use DataTypeProvider inside the actual component instead of using a Custom DataTypeProvider will solve the issue.

Do you know what could be the reason for losing focus?

Thanks again

[DmitryBogomolov]

connectProps should not be called inside render. In your sample every time SelectTypeProvider is rendered new SelectEditor component is created. Create SelectEditor in constructor.
Here is a sample:

class SelectTypeProvider extends React.PureComponent {
    constructor(props) {
       ...
       this.editor = connectProps(SelectComponent, () => ({ options: this.props.options }));
    }
    
    componentDidUpdate() {
       ...
       this.editor.update();
    }
    
    render() {
        return <DataTypeProvider editorComponent={this.editor} for={this.props.for} />
    }
}

[elmeerr]

@DmitryBogomolov as I have imagined. Thanks!!!

[durre]

Is there an elegant way of accomplishing the same thing using functional components & hooks? I've experimented a bit with React.memo & useRef, but no luck so far.

[elmeerr]

@durre I didn't try but following the concept it will work if you put it inside of useEffect as it's the same thing as componentDidMount

[lock]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.