score:0
here is a simple class with a more recent, react 16 example (with comments inline for clarity):
class people extends component {
state = {
rows: [],
loaded: false
}
/* lifecycle hook - keeping mind we are manipulating the dom */
/* within the component so we need to know the component/dom is ready */
componentdidmount(){
let self = this;
/* returns a fetch() call stored in context passed down */
/* through a higher order component */
this.props.context.getpeople()
.then(json => { self.setstate({rows:json.rows, loaded: true}); })
/* notice that loaded is set to true in the state object */
}
loading = () => (
<div classname={this.state.loaded?'ajax-loaded':'ajax-loading'}>loading</div>
/* the class ajax-loaded -- you guessed it, hides the div */
/* the thing to always keep in mind -- when state changes, things happen! */
);
render() {
return (
<div>
{this.loading()}
{this.state.rows.map(row => ( <div>{row.first} {row.last}</div>) )}
{/* again, when state changes, things happen! */}
</div>
)
}
}
score:10
rendering in react is synchronous, which means nothing else can run alongside it.
you could render your list progressively since the user's screen probably can't display more than a hundred items at a time.
also, note that rendering thousands of items is much slower in the development build than in the production build of react.
edit: another option would be to first render the loader, then render your list items on the next frame. the loader will be displayed until the list items have finished rendering.
react.createclass({
getinitialstate: function() {
return {
loading: false,
showall: false,
};
},
_showall: function() {
this.setstate({ showall: true, loading: true }, function() {
// using settimeout here ensures that the component will wait until
// the next frame before trying to render again.
this.settimeout(function() {
this.setstate({ loading: false });
}.bind(this), 1000 / 60);
});
},
render: function() {
var amount = (this.state.showall && !this.state.loading) ? 100000 : 3;
return (
<div>
<button onclick={this._showall}>
{this.state.loading ? 'loading...' : 'show all'}
</button>
{items.slice(0, amount).map(renderitem)}
</div>
);
},
});
Source: stackoverflow.com
Related Query
- React show loading spinner while DOM is rendering
- React - Display loading screen while DOM is rendering?
- How to show a loading indicator in React Redux app while fetching the data?
- React: Show loading spinner while images load
- Best way to show a loading spinner/gif while my React component is fetching via AJAX?
- React-query: Show loading spinner while fetching data
- React Router: Show progress while loading
- how to hide and show loading spinner - Activity Indicator react native, managing props and state
- Wrap a data-fetching component in a HOC to show spinner while loading
- Show spinner when data is loading on react
- React Router Dom rendering route error with loading components
- Show Loading Spinner with Axios and React (possible Redux)
- reactjs issue show loading while dom render with more logic
- How to add loading spinner in react js while my components are loading?
- React - Loading screen while DOM is rendering?
- React - show loader while child nodes are loading
- Loading spinner while fetching an api in react app not showing
- How to load spinner in react component while data is loading
- How to show a spinner while the search is going on in react js?
- React - Throttle/debounce spinner (loading message) - not show if request is faster than X milliseconds
- React video loading in memory before rendering to screen
- Preventing react from rendering unchanged componets into the virtual DOM
- React DOM offsetHeight before rendering
- How to show loading animation between React Router components
- CSS-Module classes are undefined while React server side rendering
- How to implement conditional rendering while the children component calling useState() in react hooks?
- Getting an error that images is null while trying to show a preview of the uploaded images in react js
- Show Sidebar Navigation only at Home using React Router Dom
- React onClick function only fires once upon rendering to DOM
- Browser history needs a DOM - react server side rendering
More Query from same tag
- How to combine multiple classNames in React?
- Closing a popper MUI using ClickAwayListener affects everything inside
- React. New Router after login
- Array is sorted, but React is not rendering in sorted order
- Create a react app and use a npm start command but it is not working
- <BrowserRouter> ignores the history prop
- How do I reference a local svg in React?
- how to display openweather map weather icons react.js
- React + Firebase undefined using click event
- Array of objects and i want to return true if any key value pair in the object is duplicate
- Device orientation data and fetching external API json data seems clashing. How can I fix it?
- Filter an array of objects to render items according to checkboxes selected in React using hooks
- Clojurescript, Reagent: pass atoms down as inputs, or use as global variables?
- Change format date on Datepicker (material-ui)
- How to create useStripe hook for react-stripe-elements
- Then and Catch not running on successful Axios Post request on Backend
- Pass a wrapper component as props in ReactJS
- How to toggle the state to false on component unmount using react?
- React & Node (Multer): Image is not found by path while it exists on that path
- How to apply mixpanel on event 'triggering' of dropdown in antdesign
- How to display dynamic default value in field of Strapi collection page?
- images appear in development, but not in production in "REACT"
- Adding a className dynamically in React.js with Tailwind.css
- Add icon to the start of Material-UI's Autocomplete component
- How does React Router get into the React context?
- Redux and React: Unhandled Rejection (TypeError): Cannot read property 'push' of undefined
- Deploy React website with node.js backend
- Allowing only one active state across multiple buttons
- Length is showing 0 even after using async and await keyword
- Implementing react hooks useState in material-ui Tab container not working