react-hot-loader & formatter change

[aogaili]

I'm noticing that react-hot-loader is not refreshing the component when I change the column formatter function (it works when changing text or align attributes).

I plan to open an issue in the react-hot-loader repo, but I wanted to see if anyone else is using it in the context of react-hot-loader and noticing similar issues. The current workaround is to use key= Math.random() to force react to re-render the component.

I'm using react-hot-loader 4.12.12.

[AllenFang]

@aliogaili I didn't notice this issue. but how did you change the column formatter function? Would you please describe it a bit more? Thanks!

[aogaili]

I've react-hot-loader configured to accept module changes on the parent container and down the component tree I've a table.

In the table I pass a custom formatter, nothing special:

{ dataField: 'addedOn', text: 'Added On', align: 'center', headerAlign: 'center', formatter: (cell, row) => { return <div>This Doesn't hot reload</div>; }

If I change the formatter function, for example change the text, the effect won't hot reload until I force refresh. Again, this is issue is only observed with react-hot-loader (storybook it works, but they have their own hot-reloader implementation).

My current workaround is to generate a random key:

key={DataTable.hotKey()}

// A hack to make it work with react-hot-loader
DataTable.hotKey = () => {
  if (module.hot) {
    return Math.random();
  }
  return undefined;
};

I'm not sure if this is only local to my webpack/react-hot-loader setup or a general issue, I think we need a smaller reproduction. I really hope the new react fast refresh will iron those glitches out.

[AllenFang]

Thanks your quick reply @aliogaili
it might be an issue in react-hot-loader, Let's see if fast refresh could solve this issue.