Yomguithereal / baobab

JavaScript & TypeScript persistent and optionally immutable data tree with cursors.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to update a tree from a Component before its first render?

sergiks opened this issue · comments

My React component is given its data ID via props. Baobab tree by that moment may, or may not contain data for the specified key (ID). If that data is missing, Component should place some temporary data into the tree, i.e. {image:"loading.gif"}, and initiate AJAX request to load the real data from remote server. It must also use that temporary data for the very first render.

There are other instances of this Component that might also have same ID. By placing temporary "loading.." data into the tree I want to avoid duplicate requests to the server, when one request for that ID is already pending.

I tried placing the if( !tree.exists(..)) { setLoading(); ajaxRequest(); } code in constructor() (but props are not set there yet); in componentWillMount() (render() still sees the empty state of the tree); inside the branch() call, where cursor is dynamically defined, pointing to the branch specified by the ID – that caused Warning:

setState(...): Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

Please advice, how can a component affect the tree state before the very first render?

Moved to baobab-react issues.