DEV Community: GaryRoussak

Best React practice for component which both polls and submits ?

GaryRoussak — Fri, 03 Dec 2021 10:43:20 +0000

Hi all,

I'm on a project which was coded well before I arrived but I'm wondering if it could better adhere to React principles; I'm looking for recommended general approach here rather than code-level fixes - hope that's OK. I should point out that it's an old React version and some callbacks are deprecated but I can't upgrade right now.

There's a JSX which is responsible for displaying live values from an air-conditioning unit back-end, e.g. a room temperature setpoint, fan speed, on/off mode, louvre direction - that sort of thing.

componentWillReceiveProps() is called; the new props contain all the current values and these are used to set state. As a result, render() is called and live values are now displayed. OK so far ?

The values on the screen are adjustable through various toggle/increment/decrement buttons; the design is such that a change of value isn't sent back instantaneously on a click of those controls but has to be confirmed with a separate SAVE button. Since the values sent to the back-end are now in line with what's displayed (assuming no errors, just to keep things simple in this example), then no further action is required.

However...

I've been asked to add a polling facility to the JS which requests a refresh of the live values every few seconds. I've done this with a simple setInterval(function) approach. Without going into transport details, this causes a fresh callback to componentWillReceiveProps() every ten seconds containing the latest polled values.

It 'works', but there's an issue. Say the current fan speed is MEDIUM. The user decides to change it to HIGH by clicking a 'selector' button but then, for some reason, dawdles and doesn't click SAVE straight away. On screen, the fan speed control has been changed from MEDIUM to HIGH but, all of a sudden, a poll occurs; the existing live value comes back through, the screen re-renders, and the value now returns to MEDIUM before the user has had chance to click the SAVE button. One confused user!

I think the way I would rather this work is as follows. The React detects that the user has changed from MEDIUM to HIGH but knows that SAVE hasn't been clicked yet to confirm submission of the change to the back-end. When the poll occurs and the next props arrive, the logic should detect this value-changed-but-not-yet-submitted condition and NOT set state using the newly polled props -- until, that is, SAVE (or CANCEL) is clicked and this event can be used to reset the condition.

Am I making this too complicated ? Is there a standard way in which React props/state/callbacks should handle this scenario without adding any of my own logic like this ?

Just some pointers please ?

Thanks

How to reduce AntD bundle size in CommonJS/AMD environment ?

GaryRoussak — Fri, 20 Nov 2020 17:22:58 +0000

Hi,

I'm trying to maintain a project that has a bit of 'legacy'. It has a front-end of React 15.4.2 and AntD 3.23.5.

Whilst I'd like to move to React 16 and AntD 4, and use babel-plugin-import, I have to admit to being pretty nervous about that because of the potential to break dependencies - perhaps for another time.

In the meanwhile, I'm still trying to take my browser's warning seriously that I shouldn't be using whole of AntD (quite rightly) - my module is massive and it feels like reducing the weight of AntD inside it is a good place to start as 'low-hanging fruit'.

If the project was already ES6, I'd have plenty of assistance to go at on the web. Instead, I wonder if someone could talk me through how to achieve this in my current environment, which is broadly as follows.

The package.json dependencies section is this:

  "dependencies": {
    "antd": "^3.23.5",
    "es5-shim": "^4.5.9",
    "es6-shim": "^0.35.3",
    "moment": "^2.17.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },

The code for my widgets typically begins like this (we can call this one DeviceArchitectWidget.js for argument's sake):

define(
    [
        'jquery',
        'react',
        'react-dom',

        'nmodule/myproject/rc/Libs/antd',
        'nmodule/myproject/rc/widgetJS/js/DeviceArchitect',

        'css!nmodule/myproject/rc/DeviceArchitect/DeviceArchitect',
    ],
    function(
        $,
        react,
        reactDOM,
        antd,
        deviceArchitectFileRenderDOM
    ) {

In the define, you can see the reference to nmodule/myproject/rc/Libs/antd. This file (antd.js) has the following content:

require.config({
    paths: {
        'moment': '/module/myproject/rc/node_modules/moment/min/moment.min',
        'antd': '/module/myproject/rc/node_modules/antd/dist/antd',
        'es5shim': '/module/myproject/rc/node_modules/es5-shim/es5-shim.min',
        'es5sham': '/module/myproject/rc/node_modules/es5-shim/es5-sham.min',
        'es6shim': '/module/myproject/rc/node_modules/es6-shim/es6-shim.min',
        'es6sham': '/module/myproject/rc/node_modules/es6-shim/es6-sham.min'
    },
    shim: {
        "antd": ['es5shim', 'es5sham', 'es6shim', 'es6sham','moment']
    }
});

define(
    ['antd','css!nmodule/myproject/rc/node_modules/antd/dist/antd'],
    function (antd) {
        return antd;
    }
);

I don't use that many of the libraries within antd: typically just buttons, tooltips, inputs, modals, tables. So I'm happy to amend the above files in any way that's reasonable in order to modularize my use of antd (even if it means changing all my existing JSX antd declarations) and thus to cut right back on the number of antd libraries that get pulled into my built module.

Could someone please explain to me what options I have for editing the above files to achieve this ? As you can probably tell by my descriptions, I'm still novice at combining JS language syntax with modularisation and dependency management.

Thanks in anticipation.

React newbie having to learn on an AMD project

GaryRoussak — Wed, 21 Oct 2020 09:36:23 +0000

Hi,
I've been working on the Java back end of my project but having to move over to doing some React enhancements on the UI.

I really want to get stuck in but finding it frustrating that I'm still trying to get React concepts into my thick head. Some of that is because, when I read web articles for assistance, nearly everything is (obviously) couched in terms of the latest guidelines.

What I mean by this is that React tutorials tend to present React class components in their ES6 format. Unfortunately, though, my project is stuck with AMD for the time being, for example:

define([], function(){
    return function renderDOM($, React, ReactDOM, antd, Promise, widgetHeight, widgetWidth, element){

        var CommSettings = React.createClass({

            propTypes: {
                widgetHeight: React.PropTypes.number,
                widgetWidth: React.PropTypes.number,
                setComm: React.PropTypes.func,

etc...

The above isn't helped by the fact that those who wrote the existing project code, erm..., shall we say, didn't take too much care over the Single Responsibility principle: so I'm not finding it easy to look at a single JSX file of 800 lines and appreciate what's going on.

But my real question is largely this: I'm getting to grips with the concepts explained in the ReactJS tic-tac-toe tutorial, but I want to understand how the standard ES6 declaration of a class constructor, passing of props and setting of initial state variables map back into the AMD way of doing things (as shown above). I just need an idiot's guide of how to achieve the same thing using React.createClass(), getInitialState(), propTypes:{...}, and so on.

Can anyone help ?