Hooks API - Avoid State Overwrite When Setting State After Await Statement
Let's say we have a tile grid with the follow behavior:
- There's a button for adding a tile. The tile will decide if it should be a red or blue tile after some time thinking (1-3secs). The tile will be green while it's thinking what color it should be.
- Clicking a title will remove the tile from the grid
tiles be an array of tile colors which will serve as the state of the tile grid and
setTiles as the setter of that state. Given the grid behavior,
setTiles should be called during these events:
- on click of a tile. The clicked tile should be removed from
- on click of the add button. A green tile must be added to
- after a tile decides what it's color is. The corresponding green value in
tilesmust be changed to red or green.
I've prepared a codepen of a simple implementation of the grid detailed above. The issue with this is that calls to
setTiles after an
await statement overwrites state changes that happened between the start and end of the asynchronous statement. I think this is because the function only has reference to the state value before starting the async operation.
What's the best architecture (component changes, callback passing, tile data structure), using SFCs and the Hooks API, to avoid the unintended overwrites and, ultimately, the tile grid having an updated array of tile data at all times?
Solved it by using
useReducer. Wasn't aware that with
useReducer, you have a "synchronised" state for all dispatched actions. The state overwrite wasn't an issue with the seemingly-central state with reducers. Working code here.
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?