I'm a full-stack Software Engineer and Architect. I specialise in front-end niceness, but my daily tasks are mostly about making server less work well and scale within our suit of micro services!
Agree with you @vndre
it been there for a long time. But people still doesn't know about this. I have searched for infinite scrolling react component on npm and haven't found any which is community maintained. Thanks for suggestion, I will try to improve quality of my sample code to be more realistic with api call. Thanks again :)
Yes, I have seen the react-infinite-intersection but, I was confused because they have very few download on npm.
There are two reasons why I'm more inclined towards the class components:
I'm more inclined towards the object oriented programming. So, I get more comfortable with class components and they are easy to understand for me
Some times before I have to add some feature in a functional components and it was developed by someone in organization. At the beginning there was no issue but as the component complexity increases the issues were getting worse. It's easy to write but it's easy to make mistakes too.
For creating small components like UI framework with independent components or stateless components, I use functional components but for components which are going be complex with lots of features, I prefer class components.
Yes @vetras
, usually web-app's shows the loading at bottom of the div in case of infinite scrolling. Other way I thought of was set target to last element of the list, but in that case we have to change the observer target when list updates. If you know any other way please share, it will be helpful. Thanks :)
What I usually see when we have DOM elements we want to show or hide dynamically is to have a display property on them (not just shove them outside the view 🙏 ).
We are in 2021, please stop writing class components
Lol, right? Doesn’t really lend weight to the hyperbolic title of ‘futuristic’ now, does it?
this.state = {arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
};
My heart omg 😱
Also the
IntersectObserverAPI was introduced on chrome since 2016...Agree with you @vndre it been there for a long time. But people still doesn't know about this. I have searched for infinite scrolling react component on npm and haven't found any which is community maintained. Thanks for suggestion, I will try to improve quality of my sample code to be more realistic with api call. Thanks again :)
What about github.com/thebuilder/react-inters... ?
I believe a hook approach would make things easier.
Yes, I have seen the
react-infinite-intersectionbut, I was confused because they have very few download on npm.There are two reasons why I'm more inclined towards the class components:
For creating small components like UI framework with independent components or stateless components, I use functional components but for components which are going be complex with lots of features, I prefer class components.
Thanks :)
The
div id="loading"never leaves the page. It is just pushed further down.This is weird ... but OK I guess the main point is using the
IntersectionObserverand looking at the value of theintersectionRatioto make decisions.That same principle can be applied to other things as you mention at the top. Cool.
Yes @vetras , usually web-app's shows the loading at bottom of the div in case of infinite scrolling. Other way I thought of was set target to last element of the list, but in that case we have to change the observer target when list updates. If you know any other way please share, it will be helpful. Thanks :)
What I usually see when we have DOM elements we want to show or hide dynamically is to have a display property on them (not just shove them outside the view 🙏 ).
For example:
(full stack dev here, FYI, so my FE well...)
Oh yes, I completely missed this. Let me think of this how it will be achieved as target element is required to pass the in
observemethod.This article doesn't make any attempts to be easy to understand.
It uses class components to try doing that even if it achieves the opposite and the explanations are very lackluster at best.
Just a glorified code dump
Don't have anything nice to say? Don't say it :)