Safe to use setGlobal anywhere?

Hey, really cool library.

I have a quick question though. Is using setGlobal inside components safe? Specifically functional components. I’m using the following pattern for instance:

import React from 'react';
import { setGlobal, useGlobal } from 'reactn';

interface InputProps {
  stateKey: string; // state identifier
  label: string;
}

export default (props: InputProps) => {
  const [value, setValue] = useGlobal(props.stateKey);
  if (value === undefined) {
    setGlobal({ [props.stateKey]: '' });
  }

  return (
    <div>
      <div>{props.label}</div>
      <input
        value={value}
        onChange={e => {
          e.preventDefault();
          setValue(e.target.value);
        }}
      />
    </div>
  );
};

based off of the example code that uses classes and calls setGlobal in componentDidMount.

Finally, I tried calling setGlobal inside of useEffect to no effect hence the need for wrapping setGlobal in an if statement. Is this a bug or intentional?

[CharlesStover]

This took a bit of brainstorming, but the issue is that you cannot subscribe to a property that does not exist. This is because ReactN uses a Proxy polyfill with 100% browser support as opposed to the built-in JavaScript Proxy, which only supports 87% of browsers. One of the trade-offs is that it cannot listen for non-existing property changes. You are accurately grabbing that the value is undefined, but in doing so, your component instance is not registering to be re-rendered when that property changes, because that property does not exist.

There are two solutions to this:

1. Create the property before rendering this component. If a parent is rendering these components, that parent can set these properties before returning their JSX:

const Parent = () => {
  return stateKeys.map((stateKey) => <Input stateKey={stateKey} />);
};

// can become

const Parent = () => {
  // Modify the global object as a whole,
  //   so that we can mutate multiple keys in one function call.
  const [ global, setGlobal ] = useGlobal();

  // Strip keys that already exist:
  const newKeys = stateKeys.filter(
    stateKey =>
      !Object.prototype.hasOwnProperty.call(global, stateKey)
  );

  // Set keys that don't exist:
  if (newKeys.length > 0) {
    setGlobal(newKeys.reduce(
      (acc, newKey) => ({
        ...acc,
        [newKey]: null
      }),
      Object.create(null)
    ));
    return null;
  }

  // If all keys exist, render an element for each key:
  return stateKeys.map((stateKey) => <Input stateKey={stateKey} />);

1. I have a use-force-update package that can be used as a React hook to force re-rendering. It works to fix your issue, as shown below:

import { useGlobal } from 'reactn';
import useForceUpdate from 'use-force-update';
import './App.css';

const App = () => {
  const [ value, setValue ] = useGlobal('test');
  const forceUpdate = useForceUpdate();
  if (value === undefined) {
    setValue('hello world');
    forceUpdate();
    return null;
  }
  console.log(value);
  return null;
};

export default App;

I typically do option 1 and instantiate values before accessing them, but as far as code readability codes, the second option appears to read better to me. It’s an entirely opinionated topic. Whichever way makes the most sense to you as a developer and for your app.

EDIT: I might see what I can do to treat this issue as “Calling setValue should forceUpdate when the property does not exist,” and try to include the forceUpdate function call inside the setValue function that is returned by the hook, only for values that are undefined.

[CharlesStover]

The setGlobal helper function is safe to use, but I’m not sure I’d recommend it. I can’t think of a reason it would ever cause an error to use it like this, but it isn’t the design pattern; it just coincidentally works fine. I can’t guarantee it will always work equivalently in future versions.

This may be closer to what you are looking for:

const [ value, setValue ] = useGlobal(props.stateKey);
if (value === undefined) {
  setValue('');
  return null; // Do not render until a value exists.
}