We Keep Coding

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.

Hook up API results with Redux in react js

I have a search form that fetches data from a api. This is that first time I am using Redux so please excuse my ignorance.
I am able to display the search results in the sidebar without using redux store.
handleSubmit(event) {
event.preventDefault()
get(`api1`, { maxContentLength: 400 })
.then((res) => {
this.setState({SearchItems: res.data})
})
}

There are few steps
Manually you can do using below methods of store object from redux'
below method will dispatch action to reducer
store.dispatch({type: 'GET_RESULTS' , payload: {}})
store.subscribe will receive all actions, you can register callbacks here.
store.getState() using this method you can access current state
you can find full documentation and examples at https://redux.js.org/basics/store example with redux is here redux with react
for react application you may use react-redux package to integrate redux which comes with Provider component with store property
with this you can import your global store object in your index.js file where you are creating App component.
With provider component set now you can use
And use Connect higher order component inside your react component to integrate redux actions to react component. Connect accepts two functions mapStateToProps and mapDispatchToProps functions as arguments and returns higher order component to which you pass your react component.
mapStateToProps functions as its name accepts global state and returns object with properties which then can be accessed from props, and similarly mapDispatchToProps accepts dispatchers to props. below is the example of react component integrated with redux using react-redux.
here is video tutorial react-redux video

mobx: react app rerender everytime a property changes

Say my entire react app listens to a single store. That store is an MobX observable. mobx.observable(someVeryLargeObjectContainingAllTheStates) So the design is like Redux's single store.
Does the whole react app rerender everytime a single property change in that store? Meaning render() is called recursively on ALL components?

mobx store not accessable inside lifecycle methods?

I have a react component which i am injecting a mobx store. when I try to access an observable from my store inside a lifecycle method (componentWillMount or componentDidMOunt) the value is empty. however when I access it inside the render method it is available. Is there something I am missing? I feel like I'm missing something basic here.

The documentation clearly states that observer from mobx-react tracks observables only in render method of wrapped component.
Function (and decorator) that converts a React component definition,
React component class or stand-alone render function into a reactive
component, which tracks which observables are used by render and
automatically re-renders the component when one of these values
changes.
If you take a look at observer sources you can confirm that it only tracks render method

Hi by my experience with Mobx state management you should not access the
observalbe variables from React Component.
Even when you inject the Redux Store into React Component. (Decorate or wrap).
The computed variables are designed to provide updated observable variables to React Component.
You can access Mobx actions and computed but not the observable. They are used only inside Mobx class.

Updating React state with Relay

With Relay, you create a React component as usual:
class TodoApp extends React.Component {
...
}
And then component is wrapped in a Relay container:
export default Relay.createContainer(TodoApp, {
...
});
The Relay container will fetch data using GraphQL and then update the state. This is a higher order component and this state is then passed down as props to its children.
This isn't (or doesn't appear to be) compatible with a flux implementation like Redux. Redux has a single global state object and it too has higher order components that pass props down to presentational components. So I don't see how both the Redux store and Relay containers can coexist currently.
So then how should we update state that doesn't come from the database? How is this state supposed to be managed with Relay?

While I can’t offer you an advice on using them together, technically you can definitely have several higher order components applied one after another:
class TodoApp extends React.Component {
// ...
}
TodoApp = connect(
// ...
)(TodoApp);
TodoApp = Relay.createContainer(TodoApp, {
// ...
});
export default TodoApp;
I’m not sure this makes a lot of sense, but it’s easily doable.

These things are still in discussion and the current state of Redux and Relay may not fit well together if you use a Relay container.
You can join the discussion here

I've done this as follows for a chat application:
The chat component (ChatComponent) is a dumb react component that expects all data to come as props. It also requires the redux dispatch function as a prop so it can dispatch actions when someone wants to send a new message. This is a 'private' component and is wrapped by...
ChatComponentRelay - this renders ChatComponent but is a Relay component which is also connected to the redux store. It uses one of the lifecycle methods (not the constructor) to dispatch the data received via relay into the redux store. This is the component that is used by the rest of the application, and is basically just a proxy to the underlying dumb ChatComponent. It renders ChatComponent passing in all the data in its props from the redux store, and also the redux dispatch function as well.