Atom Default Value derived from prop?

[LorenDorez]

Is there any way to initialize an atom with its default value coming from a Prop?

We currently are using ReactJS.net for SSR. While I understand SSR isnt support yet do you have an idea when this will be? Currently it looks like the setRecoilState calls are not done for SSR so the response just comes in with blank values for places that were using the atoms.

I have tried to use the initializeState on the but our app setup has a very deeply nested tree structure and very dynamic so its difficult to try and set initializeState on the because the children views change.

[drarmstr]

The default value itself can't come from a prop because the same atom could be used in multiple components which could pass in different values.

One option could be to store a placeholder value as the default and use the prop as a fallback in the component. e.g.:

const myAtom = atom({key: 'MyAtom', default: null});

function MyComponent({defaultValue}) {
  const value = useRecoilState(myAtom) ?? defaultValue;
  ...
}

However, it is also possible to initialize atoms outside of the React component hierarchy. If you are having trouble using the initializeState approach then Atom effects offer another approach to providing an initial value that can be specified as part of the atom defition.

[LorenDorez]

The issue is while your example works fine on the client side it fails on SSR (ReactJS.net). I Assume the Recoil state setting is wrapped in a useEffect().

The issue is once i start moving things into atoms for the shared state my SSR would be completely broken as it would render empty values everywhere because the initials come through as Props from MVC/ReactJS.net > React.

For now my work around is to create the call a helper function they checks if a given atom exists in a global object and if so use it otherwise create it and pass in the prop as the default value. Not Ideal but is the only way i could get Recoil to have atoms work with SSR.

[LorenDorez]

I will give atom effectsva try. I figured the atom effects where like normal react effects and don't execute for SSR.

[LorenDorez]

So after reviewing the docs the issue still stands how to get the data from the component props to the atoms effect.

Do you by chance have an example of this somewhere?

[drarmstr]

Atom effects are like effects, but they have an additional feature that they can initialize atoms for use with SSR. But, yes, the atom effects are defined as part of the Atom definition, outside of the react component tree, so they don't have direct access to props. It's problematic to directly initialize atoms based on props as they are really shared across components that might use them so you would run into race conditions, etc.

[LorenDorez]

Our default values are essentially our props used to render the component tree. The issue comes from the fact we use a single entry point with ReactJS.net/MV to render any of our pages. So the atoms that needs to be initialized are completly dynamic and unknown to app.jsx. Below is an example of our setup. For now i think this is going to work, until some form of SSR is officially supported

App.jsx

import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import { RecoilRoot } from 'recoil';
import loadable, { loadableReady } from '@loadable/component';
import { ChunkExtractor } from '@loadable/server';
import { ServerStyleSheets } from '@material-ui/core/styles'
import { WindowSizeProvider } from '@Components/Utilities/WindowSize';
import { InitializeAtom } from '@Components/Utilities/MyAtoms';


const App = (props) => {
    const AsyncComp = loadable(compProps => import(/* webpackExclude: /App.jsx$/i */ `./${compProps.Path}/${compProps.Name}.jsx`));

    useEffect(function setMaterialUiCss() {
        const jssStyles = document.querySelector('#mui-jss-ssr');
        if (jssStyles) {
            jssStyles.parentElement.removeChild(jssStyles);
        }
    }, []);

    return (
        <RecoilRoot>
            <WindowSizeProvider>
                <InitializeAtom atomKey='currentUser' atomValue={props.CurrentUser} />

                <div className="body-wrapper">
                    {props.HeaderComponent && <AsyncComp Name={props.HeaderComponent.Name} Path={props.HeaderComponent.Path} {...props.HeaderComponent.Props} />}
                    {props.BodyComponent && <AsyncComp Name={props.BodyComponent.Name} Path={props.BodyComponent.Path}  {...props.BodyComponent.Props} />}
                </div>

                {props.FooterComponent && <AsyncComp Name={props.FooterComponent.Name} Path={props.FooterComponent.Path}  {...props.FooterComponent.Props} />}
                {props.AdditionalComponents && props.AdditionalComponents.map(additionalComp => <AsyncComp key={additionalComp.Name} Name={additionalComp.Name} Path={additionalComp.Path}  {...additionalComp.Props} />)}

                <div className="scrollToTop" style={{ display: 'none' }}>
                    <a>
                        <i className="fa fa-arrow-up" aria-hidden="true"></i>
                    </a>
                </div>
            </WindowSizeProvider>
        </RecoilRoot>
    );
}
global.App = App;

/* Needed for Server Side Rendering */
global.React = React;
global.ReactDOM = ReactDOM;
global.ReactDOMServer = ReactDOMServer;
global.loadableReady = loadableReady;
global.ChunkExtractor = ChunkExtractor;
global.ServerStyleSheets = ServerStyleSheets;

__webpack_get_script_filename__ = (chunkId) => xxx.React.ChunkBundles[chunkId.toLowerCase()];
__webpack_require__.miniCssF = (chunkId) => xxx.React.ChunkBundles[`styles/${chunkId.toLowerCase()}`];

MyAtoms.jsx

import { atom, useRecoilValue } from 'recoil';

let atoms = {};

/* Helper Functions */
const addAtom = (key, defaultValue) => {
    atoms[key] = atom({
        key: key,
        default: defaultValue,
    });
};
const getAtom = (key) => {
    return atoms[key];
};
const getOrAddAtom = (key, defaultValue) => {
    if (!(key in atoms)) {
        addAtom(key, defaultValue);
    }

    return getAtom(key);
};
const useAtomValue = (key) => {
    // const value = useRecoilState(myAtom) ?? defaultValue;
    return useRecoilValue(getAtom(key));
};

/* Common Atoms */
const useCurrentUser = () => useAtomValue('currentUser');

/* Helper Component */
const InitializeAtom = (props) => {
    var initAtom = getOrAddAtom(props.atomKey, props.atomValue);

    if (props.debug) {
        const initAtomValue = useRecoilValue(initAtom);

        return (
            <div style={{ textAlign: 'center' }}>
                <div style={{ width: "50%", backgroundColor: 'darkorange', textAlign: 'left', display: 'inline-block', padding: '10px', margin: '10px' }}>
                    <strong>{props.atomKey}</strong>
                    <pre>{JSON.stringify(initAtomValue, null, 2)}</pre>
                </div>
            </div>
        );
    }
    return <></>;
}

export {
    addAtom,
    getAtom,
    getOrAddAtom,
    useAtomValue,
    InitializeAtom,
    useCurrentUser
};

[LorenDorez]

the only other thing i could think off would be to create separate functions for each view components we load and then build the initializeState object there and then set it on the recoilRoot. As this would allow the atoms to be created and used, and allow us to initalize the state from the props.

[LorenDorez]

Also the initializeState approach worked but our react is setup very dynamically where we have an entry point App.jsx (where RecoilRoot is) that receives various props like (Header, Body, Footer, Additional Components, etc..), This props are completely dynamic and would have their own atoms that need to be created.

So I would have to init every possible atom for every possible combination. again not ideal