Recoil | experimental state management library for React apps | Frontend Utils library

I'm trying to display the modal with overlapping routing at home, but I found out that it's children, and while I was trying, my parent modal didn't get any child components. I tried many things through search, but I don't know how. I got all the codes related to modal below.

I am relatively new to Apollo and GraphQL, and I need to make a requery after several mutations, since the recoil states don't want to update in time and a million errors get thrown off after some of the mutations. I simply put do not know how to do this and have been unable to find any relevant documentation to my scenario. The following code is inside of theApp.js file.

I am getting the error on production only, my dev machine is running the code fine using yarn dev.

It seems to be something to do with the react-query hook useQuery. The error is triggering inside the component where the useQuery hook is called. The API call is being triggered by the useQuery function as I can see the call in the console.

The component is as follows:

I currently have a recoil global State Array with Objects (Default: Start and Destination) and i want to add Waypoints in between of them. On pressing a green plus button, new Waypoints appear between Start and Destination:

My problem is, that it doesnt appear instantly on clicking on the "add" button, but only if i trigger any other useState. Probably because i am not adding the waypoints into the array with: "setWayPoints()" but with "wayPoints.splice". Is there any way to add them into the array with "setWayPoints()"?

The code for adding Waypoints into the global State Array:

I am using react-router-dom and am facing an issue with using : Here is my index.tsx file:

I have a form where I put a float value (1.1, 1.2, 1.9 and so on) and I want to store a bunch of them inside an array on an atom:

I'm trying to make a dynamic form where the form input fields is rendered from data returned by an API.

Since atom needs to have a unique key, I tried wrapping it inside a function, but every time I update the field value or the component re-mounts (try changing tabs), I get a warning saying:

I made a small running example here https://codesandbox.io/s/zealous-night-e0h4jt?file=/src/App.tsx (same code as below):

In RecoilJS, seamless integration with React Suspense for async selectors is a big plus. However, I am running into issues trying to normalize the data cached in Recoil, while still making use of Suspense.

To explain the problem through an example, a User might have a collection of Books. A query populates the collection with a single API call to get all the user's "Favorite" books. A later query might simply request a single book, which may or may not have already been retrieved through the favorite books query.

What I'd like to do it maintain a normalized cache of Books, such as in an AtomFamily keyed by bookId, so I don't have two copies of books that are pulled with different queries. However, I run into a problem, which is that I would like to use Suspense for any one of the queries that retrieves one or more Books. And the natural way to do that with Recoil is to use an async Selector. But I don't see it, if there's a way to normalize the data fetched through async selectors.

Is there a pattern I am overlooking, that would allow me to use async selectors representing different queries that are backed by a shared, normalized AtomFamily?

For example, if I have this BAD code, which creates duplicate objects in my state, how might I rework it to maintain a shared cache for the actual Book objects, and still make use of Suspense if a query is still fetching when a component that uses this state renders?

Query 1: get a group of books through a selector:

I am working in React Native and have encountered an error I have never seen before. I have a couple of nested mapping functions to help render a list of user accounts. The point of this is to list every user so that you can add or remove them from a groupchat. This means I need to track each users' ids and compare it to the ids of users already in the groupchat (so you can remove ones who are already in and add ones who are not, and NOT vice versa). The issue I am facing is that whatever variable I put into the function that dictates whether and add button or remove button is shown is that the id entered into the function keeps changing its value. I have console.log statements before every function call and it logs the user's uuid properly every time, but once it goes into the function, the value somehow changes from the uuid to a JSON object of what appears to be all possible View props. My code is below...