I'm trying to implement an infinite list for a React project and I'd like to know if there is an equivalent to the onEndReached from react-native that I could use to get this done easily. The idea would be to have an offset and a limit in my request so that I can append a batch of elements after I reached the end of my list.
I haven't found many options except some already complete components but I do need to implement mine.
I also found this question from January 27 (How can I implement a robust onEndReached for ScrollView on React Native) but since he doesn't have any answer I thought I should ask here.
Do you guys have any idea ?
Thanks in advance
By quick Googling, this can detect when you scroll to an element. It can call your callback to fetch more items.
https://github.com/brigade/react-waypoint
Related
Let's say I have a hook, useX() that returns some states and functions. I do an API request that returns some (dynamic amount of) strings (for example, "a" and "b").
I want to have a dictionary mapping these strings to instances of useX(), something like: x = {a: useX(), b: useX()}, so I can do actions like x.a.someFunction() or x.a.someState.
I know React doesn't let you call hooks inside loops, so I wonder whether this is even possible at all. Please help!
I think what you're facing is XY problem, you've found a problem and figured out that this is the solution, and you asked your question about the solution, not the original question..
Your problem is that you want to use "Dynamic number of hook calls.
Is this possible? No.
However, is this the solution? still a No
Your solution is basically to use one big hook or multiple hooks to solve your problem.
What's I've understood from your problem though is that you want something like events, in this case, see Redux
I'm running into a problem in React. As shown in the figure below, if there are many elements in a list, such as 100 elements, then use a component to render the view of each element in a For loop, and the web page will take several seconds to completely rendering, and no operations can be performed during rendering.
Figure 1
I think it's because the entire rendering process occupies the main process, and that lead to program cannot respond before completely rendering.
In order to improve page generation efficiency and response time, I came up with a compromise solution. As shown in the figure below, we first render the placeholder image of the entire list according to the number of lists in advance, and then render the real data one by one according to the order.
Figure 2
As shown in the figure below, for example, we have 100 elements, then render 100 empty divs or placeholders first, and then render a real element every 100/200 milliseconds.
Figure 3
Finally, after N renderings, the effect shown below will be formed. Of course, it's best to do so that only the placeholders that the user sees will render the real data.
Figure 4
Back to question, I am very unfamiliar with React, can I do this with React? Is there a corresponding library that can be used in React?
You've tagged reactjs, and react-native. Is this for react on the web or React Native?
If React Native then the FlatList component can help rather than rendering via a loop since FlatList supports lazy loading which would help with loading not all at once.
For web the recommended approach is to use react-window or react-virtualized as documented here.
I would like to render DOM elements (which im otherwise using React for) onto (for example) a plane in a 3D (WebGL -> Three.js -> Three Fiber (??? so far best way to go about it as im figuring?)) environment.
So basically Id have my containing my entire app lets say rendered, as is traditional, into "root" element. Except I want to inject a layer in that utilizes Three Fiber to render and everything I might want my site (or even just a particular component) to contain onto this plane. Allowing one to make a react site as normal and behind the scenes (probably in index.js or intermediate file) would instead of being rendered "flat" against the screen i could "tilt" the entire site, give it opacity, maybe have multiple webpages all able to be shuffled like cards, sides of a dice, w/e tf.
If anybody has any suggestions im struggling with how one could go about this.
Im worried i might have to get kind of low-level (which im not totally against), but was hopeful there was some support for something of this nature. So far ive tried even having simple elements like an image element inside a material (element - via three fiber) or inside the mesh element (where the material would go) to no avail. Im just beginning to get my hands dirty but google hasnt availed me much for this project, so I turned to good ol' stack overflow for my first personal request! 🤯 😲 👹 !
Thanks in advance so much for your time and consideration - cheers,
John Thummel
this is possible using drei/Html. some impressions:
https://twitter.com/0xca0a/status/1398633764931178498
https://twitter.com/0xca0a/status/1407758860203573251
I've been trying to implement a drag and drop library called dnd-kit for React.
I been working on a very basic example with help of the guide for sorting list with overlay but it doesn't work and i can't tell what am i doing wrong.
Here is the Sandbox Code
The animation is not properly working and if I interact with the first row, it freezes and stop working at all.
Any help please?
Edit:
After playing with it for some time and some input from the author I got it working a bit better and found the the component DragOverlay is causing the problem which I can't solve just yet.
If DragOverlay is deleted or moved outside the DndContext, it sorts just fine but without the overlay effect.
The issue is casued by the id 0. Basically the id that you pass to the useSortable hook has to a be a string (or truthy)
I changed the ids from number to string and it started working. I also forked and updated your Sandbox Code
I am right now implementing some kind of notification bubble for users of my webpage.
This bubble usually receives a set amount of time which it is 'alive', as in displayed, until it fades out.
When researching on how to do this fading out, I was usually just trying to figure out how to "remove" a component completely. However, it turns out that this is not the preferred way. The actual solution is to simply manipulate its state so it doesn't render anymore.
At this point I was seriously scratching my head. As I am usually working with languages like C++ or C# I immediately thought what the implications might be, but I didn't find anything.
What does actually happen to components which are in a 'lifeless' state? I mean, they still have to exist, right? Isn't this just polluting memory like crazy?
Thanks in advance!
You'll probably want to use React's Lifecycle Methods to unmount the notification bubble after a set amount of time.
It will be better optimized than having it in a "lifeless state" and only rendering on state or props update.
Edit: This doesn't answer the OP's question and is better served as a comment, I'll be leaving it up until they receive a more appropriate answer