Doesn't detect changes for functions that generate DOM component changes

I have a component which has a class. I have noticed that reloading does not work if a function contained in a component has code which is changed. Example:

class MainApp extends Component
{
    constructor(props)
    {
        super(props);

        this.DOM =
        {
            G :     // generator functions
            {
                contactButton : (p)=>
                {
                    return (
                        <Button className={this.classes.contactButtonContainer}
                            onClick={()=> {location.href = p.url}}>
                            <i className={p.className}/>
                        </Button>
                    );
                }
            }
        };
    }
    render ()
    {
        return (
                <div className="appWrapper">
                    <div className="mainContent">
                        <AppHeader/>
                        <div>- insert body content here -</div>
                    </div>
                    <div className="appFooter">
                        {this.DOM.G.contactButton(
                        {
                            className : 'mdi mdi-github-box',
                            url       : 'http://somewhere'
                        })}
                        {this.DOM.G.contactButton(
                            {
                                className : 'rc3 rc3-npm-box',
                                url       : 'http://somewhere'
                            })}
                        {this.DOM.G.contactButton(
                            {
                                className : 'mdi mdi-code-tags',
                                url              : 'http://somewhere''
                            })}
                    </div>
                </div>
                );
        }
}

If I edit the definition of this.DOM.G.contactButton, no changes are detected when reloading. Also to note, I am using Redux & ReactRouter (@next/latest for each). I was very careful to set up each and require the proper middleware, but I’m not sure if this is an issue with that at this point.

[ThisIsRuddy]

Just got merged 😊

[rob2d]

Thanks for the thoughtful reply. I have actually resorted to doing just that. One reason why I had done things this way is material-ui now uses JSS and has to be compiled with a context binded to the style for classNames (I mean, I don’t have to use JSS, but for the sake of consistency within these apps). I’m not sure if the technology within JSS that re-writes CSS to the DOM would have slowdown with more sheets generated per render to do that.

But I guess a little more boiler-plate here and there won’t be the end of the world. Thanks 😄 👍