We Keep Coding

React Storing data for complicated processing

I am somewhat new to ReactJS.
I want to store data for complicated computations in ReactJS. Since the setState is asynchronous, I cannot be bothered to store all the required data inside state as it would be next to impossible to do what I want.
I was thinking of doing the following: store the needed variables inside an object inside the state itself. E.g the state defined in the constructor is the following object
constructor(props){
this.state = { complicated_storage: { x : 123, y : 324 } }
}
This way I can manipulate this.state.compicated_storage.x or this.state.compicated_storage.y, and do stuff like this.state.compicated_storage.x = 4 without worrying about asynchronous behavior.
Is this a bad way of doing stuff in ReactJS. I noticed that with this you can bypass the entire setState mechanism, and just store all my variables inside the object within the state.
Thank You

Is this a bad way of doing stuff in ReactJS. I noticed that with this you can bypass the entire setState mechanism, and just store all my variables inside the object within the state.
The entire purpose of state is re-rendering components whenever it changes. If you modify it directly, such as state.someVariable = 2, React will not know about your change, and it will not rerender your components after the change (however, the change will be reflected if something else later causes a rerender).
If you need a change to some data trigger a rerender and update the view, use state together with setState.
If not, you can simply use a class field, rather than store it inside state.
Besides, I'm not sure in what way asynchrony you think will impede your goals, so perhaps you should be clearer there. State being asynchronous just means that changes to state are made "a little later" after the function is called (it's a whole other topic), so React can batch updates for performance reasons.
Last but not least, you should look into hooks (useState), instead of using class components.

React Hook component doesn't update on imported array change

I have some mocked data in usersList.js file.
Also I have created a service to add users to this array.
But component, which is responsible for rendering this data, is rendering only once. Any changes occured in usersList doesnt affect on re-render.
I try to use useEffect, but it didn't help.
Only force update can re-render it, but I am not satisfied of this solution.
userList.js
const usersList = [{...}]
export default usersList

Any changes occured in usersList doesnt affect on re-render.
That's because if you're using usersList as React state and modifying usersList, you're breaking one of the fundamental React rules. You cannot directly modify state arrays/objects.
Instead, you replace the array/object in the state, via the setter function that useState returns (or in a class component, via setState).
If this is all happening outside the component, you need to have something notify the component that things have changed, so the component can update its state. That might be using context or something else, but fundamentally the component needs to know that it needs to update its state.

Is it possible to detect the cause of getDerivedStateFromProps in React-Redux?

I have observed that the getDerivedStateFromProps of the React Component is called in at least 2 cases:
when the props are changed, e.g. the component imports Redux store data via component's props when the Redux store have received new data from the external API (either as a result from the request initiated by the component or as a push from external event)
when the component's setState is called, e.g. user can update data in some element of the component and this update is handled by the procedure that calls setState.
it is also called during the navigation, when props.match.params.... are changed.
So - I would like determine the cause (1. or 2.) of the getDerivedStateFromProps and make distinct actions in each case. How it is possible to make such distinction. Maybe this is not possible to do. Or maybe my architecture is flawed if I wish to do this?
The main problem for me is - how to pass business object from the redux store (to which the props of component points to) into this.state of some component for further local manipulation?
My previous attempt is documented in the question ReactJS setState conflicts with getDerivedStateFromProps in which the more concrete code examples are available.

How can you create a functional component that updates on Redux store change?

For my application, I want to create a component who's sole purpose is to update when there is a change to the Redux store.
I have achieved this with a componentDidMount() that checks if the component's state matches the store and sets the state if not.
My solution works, and is suitable enough for the situation, but it seems like a lot of code for a simple function.
How can one achieve the same outcome, a component that updates on Redux store change, using a functional component or a more simple stateful component?
Update: Thanks to the comments below, I have a new working the passes state information as props.

React components renders due to changes in props and state, therefore when you connect your component to Redux store
and supply mapStateToProps, when redux store update the mentioned props that you will return from that function, your component will re-render. You can detect changes via componentWillReciveProps life cycle method.

componentWillReceiveProps isn't called until component is focused, is it something I've done?

I have a ReactJS component that I'm developing which needs to get some information from the URL. To do this I've been utilizing the componentWillReceiveProps lifecycle method to look at props.location.query and dispatches actions to a Redux store in order to update the known state. The problem that I'm running into is that it doesn't appear that componentWillReceiveProps is being called for my component until that component has focus. I can reload the page which hosts this component and the render is called but componentWillReceiveProps is never called first.
Clearly I'm either understanding the lifecycle incorrectly with respect to componentWillReceiveProps or there is something else either wrong in my component or application which is make it behave differently than it is intended. Please set me straight either way.

componentWillReceiveProps isn't called on the first render.
From the React Docs:
"Invoked when a component is receiving new props. This method is not called for the initial render."