Develop Reference

React component not carrying over functions from class when re-rendering

I'm attempting to build a Minesweeper game as practice using React. I have a main Minesweeper.js file with all of the functionality.
export class Tile {
constructor(board, pos) {
this.board = board;
this.pos = pos;
this.bombed = false;
this.explored = false;
this.flagged = false;
}
adjacentBombCount() {
let bombCount = 0;
this.neighbors().forEach(neighbor => {
if (neighbor.bombed) {
bombCount++;
}
});
return bombCount;
}
explore() {
if (this.flagged || this.explored) {
return this;
}
this.explored = true;
if (!this.bombed && this.adjacentBombCount() === 0) {
this.neighbors().forEach(tile => {
tile.explore();
});
}
}
neighbors() {
const adjacentCoords = [];
Tile.DELTAS.forEach(delta => {
const newPos = [delta[0] + this.pos[0], delta[1] + this.pos[1]];
if (this.board.onBoard(newPos)) {
adjacentCoords.push(newPos);
}
});
return adjacentCoords.map(coord => this.board.grid[coord[0]][coord[1]]);
}
plantBomb() {
this.bombed = true;
}
toggleFlag() {
if (!this.explored) {
this.flagged = !this.flagged;
return true;
}
return false;
}
}
Tile.DELTAS = [[-1, -1], [-1, 0], [-1, 1], [ 0, -1],
[ 0, 1], [ 1, -1], [ 1, 0], [ 1, 1]];
export class Board {
constructor(gridSize, numBombs) {
this.gridSize = gridSize;
this.grid = [];
this.numBombs = numBombs;
this.generateBoard();
this.plantBombs();
}
generateBoard() {
for (let i = 0; i < this.gridSize; i++) {
this.grid.push([]);
for (let j = 0; j < this.gridSize; j++) {
const tile = new Tile(this, [i, j]);
this.grid[i].push(tile);
}
}
}
onBoard(pos) {
return (
pos[0] >= 0 && pos[0] < this.gridSize &&
pos[1] >= 0 && pos[1] < this.gridSize
);
}
plantBombs() {
let totalPlantedBombs = 0;
while (totalPlantedBombs < this.numBombs) {
const row = Math.floor(Math.random() * (this.gridSize - 1));
const col = Math.floor(Math.random() * (this.gridSize - 1));
let tile = this.grid[row][col];
if (!tile.bombed) {
tile.plantBomb();
totalPlantedBombs++;
}
}
}
lost() {
let lost = false;
this.grid.forEach(row => {
row.forEach(tile => {
if (tile.bombed && tile.explored) {
lost = true;
}
});
});
return lost;
}
won() {
let won = true;
this.grid.forEach(row => {
row.forEach(tile => {
if (tile.flagged === tile.revealed || tile.flagged !== tile.bombed) {
won = false;
}
});
});
return won;
}
}
Then I have three React components: Board.jsx
import React from "react";
import Tile from "./tile";
class Board extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
{this.props.board.grid.map((row, idx) => {
return (<div key={idx}>
{row.map((tile, idx) => {
return (
<div key={idx}>
<Tile
tile={tile}
updateGame={this.props.updateGame}/>
</div>
)
})}
</div>)
})}
</div>
)
}
}
export default Board;
Tile.jsx
import React from "react";
class Tile extends React.Component {
constructor(props) {
super(props)
this.checkState = this.checkState.bind(this)
}
checkState() {
console.log(this)
if (this.props.tile.bombed) {
return "💣"
} else if (this.props.tile.explored) {
return (this.props.tile.adjacentBombCount())
} else if (this.props.tile.flagged) {
return "⚐"
} else {
return ""
}
}
render() {
return(
<div>{this.checkState()}</div>
)
}
}
export default Tile;
and finally a Game.jsx
import React from "react";
import * as Minesweeper from "../minesweeper"
import Board from "./board";
class Game extends React.Component {
constructor(props) {
super(props);
let board = new Minesweeper.Board(10, 5)
this.state = {
board: board
}
this.updateGame = this.updateGame.bind(this);
}
updateGame() {
}
render() {
return(
<Board
board={this.state.board}
updateGame={this.updateGame}/>
)
}
}
export default Game
Within Tile.jsx, I want the render to display adjacent bomb counts using the function from the main Tile js class (in minesweeper.js). This function is accessible when I first render my Tiles as React Components; however, if I change something (by going into components and updating), the function is no longer accessible. To help explain, here is the console.log of this.props.tile on the first render:
However, after re-rendering from updating a component, this is what this.props.tile looks like .
Therefore, it will cause an error when I try to add the bomb count, as it cannot find the function. Can someone explain why the function is disappearing and how I can access it when Components change? Thanks!

This was an issue with the React DevTools specifically, and it will be addressed in an update, see: https://github.com/facebook/react/issues/24781

Problem with infinite loop using ngrx library

cart.service.ts
import { Tools } from './tools';
import { Cart, cartSelector } from './../_store/state/cart/cart.state';
import {
AddProduct,
RemoveProduct,
AddMultiple,
CartMsg,
TypeMessageAlreadyCart,
TypeEmptyCart,
AddAdress,
UpdateProduct
} from './../_store/state/cart/cart.actions';
import { CartItem, Variant } from './../_store/models/cart-item.model';
import { Store } from '#ngrx/store';
import { Injectable, OnDestroy } from '#angular/core';
import { RootState } from '../_store/state/root/root.state';
import { Product } from 'src/app/pages/_model/product.model';
import { Subscription } from 'rxjs';
#Injectable({
providedIn: 'root',
})
export class CartService implements OnDestroy {
products: CartItem[];
cartStoreId = 'cart';
idAddress = 0;
subscription = new Subscription();
constructor(
private store: Store<RootState>,
private tools: Tools,
) {
// this.tools.storeInfo({}, this.cartStoreId); // Line to debug Cart
this.recoverCartInfo();
const select = this.store.select(cartSelector).subscribe(
cart => {
this.products = JSON.parse(JSON.stringify(cart.products));
this.idAddress = cart.idAddress;
});
this.subscription.add(select);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
storeCartInfo() {
const cartStored = {
products: this.products,
idAddress: this.idAddress
};
this.tools.storeInfo(cartStored, this.cartStoreId);
}
updateCartPrices(idProduct: number, variants) {
let idx = this.tools.findProduct(idProduct, this.products);
if (idx !== -1) {
let total = 0;
this.products[idx].variants.forEach(variant => {
for (let item of variants) {
if (variant.idVariant === item.ID_VARIANT) {
variant.unitPrice = item.PRICE;
total += variant.unitPrice * variant.qty;
continue;
}
}
})
this.products[idx].totalPrice = total;
}
//this.store.dispatch(new UpdateProduct(this.products));
this.storeCartInfo();
}
recoverCartInfo() {
const cart = this.tools.getInfo(this.cartStoreId);
if (cart && (cart.products) && (cart.products.length > 0)) {
const result: Cart = {
totalProducts: cart.products.length,
idAddress: cart.idAddress,
products: cart.products,
msgType: '',
currency: this.tools.getInfo('currency_default')
};
this.store.dispatch(new AddMultiple(result));
}
}
addProductToCart(product: Product, variants?: Variant[]) {
if (this.changeProductInCart(product, variants)) {
this.store.dispatch(new AddProduct(this.products));
this.storeCartInfo();
return true;
} else {
this.store.dispatch(new TypeMessageAlreadyCart());
return false;
}
}
changeProductInCart(product: Product, variants?: Variant[]) {
const index = this.tools.findProduct(product.ID_PRODUCT, this.products);
const attrAdded = (variants && (variants.length > 0)) ? this.mergeVariantsCart(product.ID_PRODUCT, variants) : [];
const totals = this.counterTotals(attrAdded);
if (index === - 1) {
const item = {
idProduct: product.ID_PRODUCT,
reference: product.REFERENCE,
idProductImage: (product.ID_PRODUCT_IMAGE) ? product.ID_PRODUCT_IMAGE : 0,
name: product.NAME,
totalQty: totals.tQty,
totalPrice: totals.tPrice,
variants: attrAdded
};
this.products.push(item);
return true;
} else if (variants && (variants.length > 0)) {
this.products[index].variants = attrAdded;
this.products[index].totalQty = totals.tQty;
this.products[index].totalPrice = totals.tPrice;
return true;
}
return false;
}
mergeVariantsCart(idProduct: number, variants: Variant[]) {
if (this.products.length > 0) {
const index = this.tools.findProduct(idProduct, this.products);
if (index >= 0) {
const varInCart = this.products[index].variants;
if (varInCart.length > 0) {
variants.forEach(variant => {
const idx = this.tools.findVariant(variant.idVariant, varInCart);
if (variant.qty > 0) {
if (idx >= 0) {
varInCart[idx].qty = variant.qty;
varInCart[idx].unitPrice = variant.unitPrice;
} else {
varInCart.push(variant);
}
} else if (idx >= 0) {
varInCart.splice(idx, 1);
}
});
} else {
variants.forEach(variant => {
if (variant.qty > 0) {
varInCart.push(variant);
}
});
}
return varInCart;
} else {
return variants;
}
} else {
return variants;
}
}
counterTotals(variants: Variant[]) {
let totalQty = 0;
let totalPrice = 0;
if (!this.tools.isArrayEmpty(variants)) {
variants.forEach(variant => {
totalQty += (variant.qty * 1);
totalPrice += (variant.qty * variant.unitPrice);
});
}
return {
tQty : totalQty,
tPrice: totalPrice
};
}
addMultipleProductsToCart(products: any[]) {
let added = false;
products.forEach(p => {
if (this.changeProductInCart(p.product, p.variants)) {
added = true;
}
});
if (added) {
const result: Cart = {
totalProducts: this.products.length,
idAddress: this.idAddress,
products: this.products,
msgType: CartMsg.msgOk,
currency: this.tools.getInfo('currency_default')
};
this.store.dispatch(new AddMultiple(result));
this.storeCartInfo();
return true;
} else {
this.store.dispatch(new TypeMessageAlreadyCart());
}
return false;
}
removeProductFromCart(id: number) {
if (this.products.length > 0) {
const index = this.tools.findProduct(id, this.products);
if (index >= 0) {
this.products.splice(index, 1);
this.store.dispatch(new RemoveProduct(this.products));
this.storeCartInfo();
return true;
}
} else {
this.store.dispatch(new TypeEmptyCart());
}
return false;
}
destroyCart() {
this.products = [];
const cart: Cart = {
totalProducts: 0,
idAddress: 0,
products: this.products,
msgType: '',
currency: this.tools.getInfo('currency_default')
};
this.store.dispatch(new AddMultiple(cart));
this.storeCartInfo();
}
addAddress(idAddress: number) {
this.idAddress = idAddress;
this.store.dispatch(new AddAdress(idAddress));
this.storeCartInfo();
}
}
variant-selector.ts
import { Tools } from './../../../../core/_services/tools';
import { CONFIG } from './../../../../app.config';
import {
Component,
Input,
Output,
EventEmitter,
Renderer2,
ElementRef,
ViewChild,
OnChanges,
AfterViewInit,
OnDestroy
} from '#angular/core';
import { Variant } from 'src/app/core/_store/models/cart-item.model';
import { ResponsiveService } from 'src/app/core/_services/resposive.service';
import { Subscription, Observable } from 'rxjs';
import { Store } from '#ngrx/store';
import { RootState } from 'src/app/core/_store/state/root/root.state';
import {
hidePricesSelector,
hideNoStockSelector
} from 'src/app/core/_store/state/config/config.state';
import { UpdateProduct } from 'src/app/core/_store/state/cart/cart.actions';
import { CartService } from 'src/app/core/_services/cart.service';
#Component({
selector: 'b2b-variants-selector',
templateUrl: './variants-selector.component.html'
})
export class VariantsSelectorComponent
implements OnChanges, AfterViewInit, OnDestroy {
#Input() idProduct: number;
#Input() variants: any[];
#Input() variantsInCart: Variant[];
#Input() attributes: any[];
#Input() reference: string;
#Input() isCheckout: boolean;
#Output() variantChange = new EventEmitter<Variant>();
#Output() getValue = new EventEmitter<any>();
#ViewChild('attTable') attTable: ElementRef;
#ViewChild('variantTable') variantTable: ElementRef;
showMatrix = CONFIG.showMatrix;
pricesBySize = CONFIG.pricesBySize;
colors: any;
sizes: any;
tableRealWidth = 0;
tableRotate = 0;
hideArrows = false;
variantSelected: any;
groupSelection: any[] = [];
imgPrd = CONFIG.productImg;
subscription = new Subscription();
private hidePrices$: Observable<boolean>;
private hideNoStock$: Observable<boolean>;
constructor(
private tools: Tools,
private renderer: Renderer2,
private responsiveService: ResponsiveService,
private store: Store<RootState>,
private cartService: CartService
) {
const getRes = this.responsiveService
.getResponsiveDeviceStatus$()
.subscribe(() => this.checkVisibility());
this.subscription.add(getRes);
this.hidePrices$ = this.store.select(hidePricesSelector);
this.hideNoStock$ = this.store.select(hideNoStockSelector);
}
ngOnInit() {
this.cartService.updateCartPrices(this.idProduct,this.variants);
}
ngOnChanges() {
if (this.showMatrix && this.attributes.length !== 0) {
this.calculateMatrixAttrs();
}
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
ngAfterViewInit() {
setTimeout(() => {
this.checkVisibility();
}, 10);
}
checkColourOutofStock(color) {
for (const size of this.sizes.ATTR_VALUES) {
const variant = this.getVariant(
this.colors.ID_ATTRIBUTE_GROUP +
'-' +
color.ID_ATTRIBUTE +
'-' +
this.sizes.ID_ATTRIBUTE_GROUP +
'-' +
size.ID_ATTRIBUTE
);
if (
variant &&
(variant.OUT_OF_STOCK === true ||
variant.QUANTITY > 0 ||
variant.QUANTITY_PRODUCTION > 0)
) {
return false;
}
}
return true;
}
calculateMatrixAttrs() {
this.attributes.forEach((attrGroup: any) => {
if (attrGroup.IS_COLOR_GROUP) {
for (const item of attrGroup.ATTR_VALUES) {
item.ACTIVE = false;
}
this.colors = attrGroup;
} else {
this.sizes = attrGroup;
this.tableRealWidth =
this.tools.getObjectLength(this.sizes.ATTR_VALUES) *
(this.pricesBySize ? 75 : 115) +
45;
}
});
}
getMatrixPrice(attrIds: string) {
const variant = this.getVariant(attrIds);
return variant.PRICE;
}
getMatrixDiscount(attrIds: string) {
const variant = this.getVariant(attrIds);
return variant.DISCOUNT ? variant.DISCOUNT : null;
}
getMatrixDiscountType(attrIds: string) {
const variant = this.getVariant(attrIds);
return variant.DISCOUNT_TYPE ? variant.DISCOUNT_TYPE : null;
}
checkVisibility() {
const visibleWidth = this.attTable.nativeElement.offsetWidth - 80;
if (visibleWidth > this.tableRealWidth) {
this.hideArrows = true;
} else {
this.hideArrows = false;
}
}
rotateTable(direction: string) {
const visibleWidth = this.attTable.nativeElement.offsetWidth - 95;
if (visibleWidth < this.tableRealWidth) {
let move = this.tableRotate;
if (direction === 'left') {
move += 240;
if (move > 0) {
move = 0;
}
} else {
const offsetRigth = visibleWidth - this.tableRealWidth;
move -= 240;
if (move < offsetRigth) {
move = offsetRigth;
}
}
this.tableRotate = move;
this.renderer.setStyle(
this.variantTable.nativeElement,
'transform',
'translate3d(' + this.tableRotate + 'px, 0px, 0px)'
);
}
}
findGroup(id: number) {
if (!this.tools.isArrayEmpty(this.groupSelection)) {
for (let i = 0; i < this.groupSelection.length; i++) {
if (this.groupSelection[i].idGroup === id) {
return i;
}
}
}
return -1;
}
checkSelected(groupId: number, variantId: number) {
const idx = this.findGroup(groupId);
if (idx >= 0 && this.groupSelection[idx].idVariant === variantId) {
return true;
}
return false;
}
changeVariantSelection(groupId: number, variantId: number) {
const idx = this.findGroup(groupId);
if (idx === -1) {
this.groupSelection.push({
idGroup: groupId,
idVariant: variantId
});
} else {
this.groupSelection[idx].idVariant = variantId;
}
this.getVariantSelected();
}
getVariantSelected() {
const sortGroup = this.groupSelection.sort((a, b) =>
a.idGroup > b.idGroup ? 1 : -1
);
let hassIds = '';
let counter = 0;
sortGroup.forEach(g => {
if (counter > 0) {
hassIds += '-';
}
hassIds += g.idGroup + '-' + g.idVariant;
counter++;
});
this.variantSelected = this.getVariant(hassIds);
}
sendVariantAdded(variant: Variant) {
this.variantChange.next(variant);
}
getQtyincart(idVariant: number) {
const idx = this.tools.findVariant(idVariant, this.variantsInCart);
return idx >= 0 ? this.variantsInCart[idx].qty : 0;
}
getVariant(attrIds: string) {
let variantData = null;
this.variants.forEach(variant => {
if (variant.ATTRIDS === attrIds) {
variantData = { ...variant };
variantData.qtyIncArt = this.getQtyincart(variantData.ID_VARIANT);
}
});
return variantData;
}
changeImage(color, active) {
const tempActive = active;
let init = false;
for (const item of this.colors.ATTR_VALUES) {
item.ACTIVE = false;
}
if (this.colors.ATTR_VALUES.find(x => x.ATTR_REFERENCE === color)) {
if (tempActive) {
this.colors.ATTR_VALUES.find(
x => x.ATTR_REFERENCE === color
).ACTIVE = false;
init = true;
} else if (
this.colors.ATTR_VALUES.find(x => x.ATTR_REFERENCE === color)
.IMAGES[0] !== ''
) {
this.colors.ATTR_VALUES.find(
x => x.ATTR_REFERENCE === color
).ACTIVE = true;
}
}
this.getValue.emit({ color, init });
}
}
In the code above I try to call the function updateCartPrices but it enters into an infinite loop because of the commented dispatch. I'm new to angular and It would be great if you could help me fix this issue
I think the problem is because when the state is updated causes the view to reload, by I don't understand why

React infinite scroll component performance

I have written the following infinite scroll component in React:
import React from 'react'
import { uniqueId, isUndefined, hasVerticalScrollbar, hasHorizontalScrollbar, isInt, throttle } from '../../../js/utils';
export default class BlSimpleInfiniteScroll extends React.Component {
constructor(props) {
super(props)
this.handleScroll = this.handleScroll.bind(this)
this.itemsIdsRefsMap = {}
this.isLoading = false
this.node = React.createRef()
}
componentDidMount() {
const {
initialId
} = this.props
let id
if (initialId) {
if (typeof initialId === "function") {
id = initialId()
}
else {
id = initialId
}
this.scrollToId(id)
}
}
componentDidUpdate(prevProps) {
if (
this.isLoading
&&
prevProps.isInfiniteLoading
&&
!this.props.isInfiniteLoading
) {
const axis = this.axis()
const scrollProperty = this.scrollProperty(axis)
const offsetProperty = this.offsetProperty(axis)
this.scrollTo(scrollProperty, this.node.current[offsetProperty])
this.isLoading = false
}
}
itemsRenderer(items) {
const length = items.length
let i = 0
const renderedItems = []
for (const item of items) {
renderedItems[i] = this.itemRenderer(item.id, i, length)
i++
}
return renderedItems
}
itemRenderer(id, i, length) {
const {
itemRenderer,
isInfiniteLoading,
displayInverse
} = this.props
let renderedItem = itemRenderer(id, i)
if (isInfiniteLoading) {
if (!displayInverse && (i == length - 1)) {
renderedItem = this.standardLoadingComponentWrapperRenderer(id, renderedItem)
}
else if (i == 0) {
renderedItem = this.inverseLoadingComponentWrapperRenderer(id, renderedItem)
}
}
const ref = this.itemsIdsRefsMap[id] || (this.itemsIdsRefsMap[id] = React.createRef())
return (
<div className="bl-simple-infinite-scroll-item"
key={id}
ref={ref}>
{renderedItem}
</div>
)
}
loadingComponentRenderer() {
const {
loadingComponent
} = this.props
return (
<div className="bl-simple-infinite-scroll-loading-component"
key={uniqueId()}>
{loadingComponent}
</div>
)
}
loadingComponentWrapperRenderer(id, children) {
return (
<div className="bl-simple-infinite-scroll-loading-component-wrapper"
key={id}>
{children}
</div>
)
}
standardLoadingComponentWrapperRenderer(id, renderedItem) {
return this.loadingComponentWrapperRenderer(id, [
renderedItem,
this.loadingComponentRenderer()
])
}
inverseLoadingComponentWrapperRenderer(id, renderedItem) {
return this.loadingComponentWrapperRenderer(id, [
this.loadingComponentRenderer(),
renderedItem
])
}
axis() {
return this.props.axis === 'x' ? 'x' : 'y'
}
scrollProperty(axis) {
return axis == 'y' ? 'scrollTop' : 'scrollLeft'
}
offsetProperty(axis) {
return axis == 'y' ? 'offsetHeight' : 'offsetWidth'
}
scrollDimProperty(axis) {
return axis == 'y' ? 'scrollHeight' : 'scrollWidth'
}
hasScrollbarFunction(axis) {
return axis == 'y' ? hasVerticalScrollbar : hasHorizontalScrollbar
}
scrollToStart() {
const axis = this.axis()
this.scrollTo(
this.scrollProperty(axis),
!this.props.displayInverse ?
0
:
this.scrollDimProperty(axis)
)
}
scrollToEnd() {
const axis = this.axis()
this.scrollTo(
this.scrollProperty(axis),
!this.props.displayInverse ?
this.scrollDimProperty(axis)
:
0
)
}
scrollTo(scrollProperty, scrollPositionOrPropertyOfScrollable) {
const scrollableContentNode = this.node.current
if (scrollableContentNode) {
scrollableContentNode[scrollProperty] = isInt(scrollPositionOrPropertyOfScrollable) ?
scrollPositionOrPropertyOfScrollable
:
scrollableContentNode[scrollPositionOrPropertyOfScrollable]
}
}
scrollToId(id) {
if (this.itemsIdsRefsMap[id] && this.itemsIdsRefsMap[id].current) {
this.itemsIdsRefsMap[id].current.scrollIntoView()
}
}
handleScroll() {
const {
isInfiniteLoading,
infiniteLoadBeginEdgeOffset,
displayInverse
} = this.props
if (
this.props.onInfiniteLoad
&&
!isInfiniteLoading
&&
this.node.current
&&
!this.isLoading
) {
const axis = this.axis()
const scrollableContentNode = this.node.current
const scrollProperty = this.scrollProperty(axis)
const offsetProperty = this.offsetProperty(axis)
const scrollDimProperty = this.scrollDimProperty(axis)
const currentScroll = scrollableContentNode[scrollProperty]
const currentDim = scrollableContentNode[offsetProperty]
const scrollDim = scrollableContentNode[scrollDimProperty]
const finalInfiniteLoadBeginEdgeOffset = !isUndefined(infiniteLoadBeginEdgeOffset) ?
infiniteLoadBeginEdgeOffset
:
currentDim / 2
let thresoldWasReached = false
let memorizeLastElementBeforeInfiniteLoad = () => { }
if (!displayInverse) {
thresoldWasReached = currentScroll >= (scrollDim - finalInfiniteLoadBeginEdgeOffset)
}
else {
memorizeLastElementBeforeInfiniteLoad = () => {
// TODO
}
thresoldWasReached = currentScroll <= finalInfiniteLoadBeginEdgeOffset
}
if (thresoldWasReached) {
this.isLoading = true
memorizeLastElementBeforeInfiniteLoad()
this.props.onInfiniteLoad()
}
}
}
render() {
const {
items
} = this.props
return (
<div className="bl-simple-infinite-scroll"
ref={this.node}
onScroll={this.handleScroll}
onMouseOver={this.props.onInfiniteScrollMouseOver}
onMouseOut={this.props.onInfiniteScrollMouseOut}
onMouseEnter={this.props.onInfiniteScrollMouseEnter}
onMouseLeave={this.props.onInfiniteScrollMouseLeave}>
{this.itemsRenderer(items)}
</div>
)
}
}
And I use it like this in a chat app I am writing:
...
<BlSimpleInfiniteScroll items={chat.messages}
ref={this.infiniteScrollComponentRef}
initialId={() => lastOfArray(chat.messages).id}
itemRenderer={(id, i) => this.messageRenderer(id, i, chat.messages)}
loadingComponent={<BlLoadingSpinnerContainer />}
isInfiniteLoading={isChatLoading}
displayInverse
infiniteLoadBeginEdgeOffset={void 0}
infiniteLoadingBeginBottomOffset={void 0}
onInfiniteLoad={() => this.props.onLoadPreviousChatMessages(chat.id)}
onInfiniteScrollMouseEnter={this.handleInfiniteScrollMouseEnter}
onInfiniteScrollMouseLeave={this.handleInfiniteScrollMouseLeave} />
...
The problem is that as soon as I scroll until the thresold and onInfiniteLoad is called, before the loading spinner is showed and after the data has been loaded the scroll freezes and the component becomes unresponsive.
How can I resolve this issue?
When I render the spinner container and after the previous loaded messages, shouldn't React just append the new divs retaining the previously added items in order to maintain the component performant?
If not, what key concepts of React I am missing?
Thank you for your attention!
UPDATE: Here are the additional components:
BlOrderChat represents a chat window and renders BlSimpleInfiniteScroll:
import React from 'react'
import BlOrderChatMessage from './BlOrderChatMessage';
import { isEmpty, uniqueId } from '../../../js/utils';
import { chatSelector } from '../selectors';
import BlLoadingSpinnerContainer from '../../core/animation/loading/BlLoadingSpinnerContainer';
import BlSimpleInfiniteScroll from '../../core/scroll/BlSimpleInfiniteScroll';
export default class BlOrderChat extends React.Component {
static BL_ORDER_CHAT_MESSAGE_ID_ATTR_PREFIX = 'blOrderChatMessage'
constructor(props) {
super(props)
this.messageRenderer = this.messageRenderer.bind(this)
this.infiniteScrollComponentRef = React.createRef()
}
scrollToBottom() {
this.infiniteScrollComponentRef.current && this.infiniteScrollComponentRef.current.scrollToStart()
}
messageRenderer(messageId, index, messages) {
const {
currentUser, chat
} = this.props
const message = messages[index]
const length = messages.length
const fromUser = chat.users.items[message.from_user_id]
const itemComponentRender = (children) => (
<div key={messageId}>
{children}
</div>
)
const messageIdAttr = `${BlOrderChat.BL_ORDER_CHAT_MESSAGE_ID_ATTR_PREFIX}${message.id}`
const renderMessageComponent = () => (
<BlOrderChatMessage id={messageIdAttr}
key={uniqueId() + message.id}
message={message.message}
sentUnixTs={message.sent_unix_ts}
currentUser={currentUser}
fromUser={fromUser}
usersInvolvedInChatLength={chat.users.order.length} />
)
let children = []
if (index === 0) {
// First message.
children = [
<div key={uniqueId()} className="bl-padding"></div>,
renderMessageComponent()
]
}
else if (index === length - 1) {
// Last message.
children = [
renderMessageComponent(onComponentDidMount),
<div key={uniqueId()} className="bl-padding"></div>
]
}
else {
// Message in the middle.
children = [
renderMessageComponent()
]
}
return itemComponentRender(children)
}
render() {
const {
chat: propsChat, isChatLoading,
currentUser
} = this.props
const chat = chatSelector(propsChat, currentUser)
const chatHasMessages = chat && !isEmpty(chat.messages)
return (
<div className="bl-order-chat">
<div className="bl-order-chat-header">
// ...
</div>
<div className="bl-order-chat-content">
{
(chatHasMessages &&
<div className="bl-order-chat-content-inner">
<div className="bl-order-chat-infinite-scroll">
<BlSimpleInfiniteScroll items={chat.messages}
ref={this.infiniteScrollComponentRef}
initialId={() => lastOfArray(chat.messages).id}
itemRenderer={(id, i) => this.messageRenderer(id, i, chat.messages)}
loadingComponent={<BlLoadingSpinnerContainer />}
isInfiniteLoading={isChatLoading}
displayInverse
infiniteLoadBeginEdgeOffset={void 0}
infiniteLoadingBeginBottomOffset={void 0}
onInfiniteLoad={() => this.props.onLoadPreviousChatMessages(chat.id)}
onInfiniteScrollMouseEnter={this.handleInfiniteScrollMouseEnter}
onInfiniteScrollMouseLeave={this.handleInfiniteScrollMouseLeave} />
</div>
</div>
)
||
(isChatLoading &&
<BlLoadingSpinnerContainer />
)
}
</div>
<div className="bl-order-chat-footer">
// ...
</div>
</div>
)
}
}
BlOrderChatBox, contains BlOrderChat:
import React from 'react'
import BlOrderChat from './BlOrderChat';
import BlAlert from '../../core/alert/BlAlert';
import BlLoadingSpinnerContainer from '../../core/animation/loading/BlLoadingSpinnerContainer';
export default class BlOrderChatBox extends React.Component {
constructor(props) {
super(props)
this.node = React.createRef()
}
render() {
const {
ordId, currentChat,
isCurrentChatLoading, currentUser,
err
} = this.props
return (
<div className="bl-order-chat-box" ref={this.node}>
<div className="bl-order-chat-box-inner">
{
(err &&
<BlAlert type="error" message={err} />)
||
(currentChat && (
// ...
<div className="bl-order-chat-box-inner-chat-content">
<BlOrderChat ordId={ordId}
chat={currentChat}
isChatLoading={isCurrentChatLoading}
onLoadPreviousChatMessages={this.props.onLoadPreviousChatMessages}
currentUser={currentUser} />
</div>
))
||
<BlLoadingSpinnerContainer />
}
</div>
</div>
)
}
}
And here is the component which renders BlOrderChatBox (it is the topmost stateful component):
import React from 'react'
import { POSTJSON } from '../../../js/ajax';
import config from '../../../config/config';
import { newEmptyArrayAble, arrayToArrayAbleItemsOrder, arrayAbleItemsOrderToArray, mergeArrayAbles, newArrayAble, firstOfArrayAble, isArrayAble } from '../../../js/data_structures/arrayable';
export default class BlOrderChatApp extends React.Component {
static NEW_CHAT_ID = 0
static MAX_NUMBER_OF_MESSAGES_TO_LOAD_PER_AJAX = 30
constructor(props) {
super(props)
this.currentUser = globals.USER
this.lastHandleSendMessagePromise = Promise.resolve()
this.newMessagesMap = {}
this.typingUsersDebouncedMap = {}
// Imagine this comes from a database.
const chat = {
// ...
}
const initialState = {
chats: newArrayAble(this.newChat(chat)),
currentChatId: null,
shouldSelectUserForNewChat: false,
newChatReceivingUsers: newEmptyArrayAble(),
isChatListLoading: false,
isCurrentChatLoading: false,
popoverIsOpen: false,
popoverHasOpened: false,
err: void 0,
focusSendMessageTextarea: false,
newChatsIdsMap: {},
currentChatAuthActs: {},
BlOrderChatComponent: null,
}
this.state = initialState
this.handleLoadPreviousChatMessages = this.handleLoadPreviousChatMessages.bind(this)
}
POST(jsonData, callback) {
let requestJSONData
if (typeof jsonData === "string") {
requestJSONData = {
action: jsonData
}
}
else {
requestJSONData = jsonData
}
return POSTJSON(config.ORDER_CHAT_ENDPOINT_URI, {
...requestJSONData,
order_chat_type: this.props.orderChatType,
}).then(response => response.json()).then(json => {
this.POSTResponseData(json, callback)
})
}
POSTResponseData(data, callback) {
if (data.err) {
this.setState({
err: data.err
})
}
else {
callback && callback(data)
}
}
newChat(chat) {
const newChat = {
id: (chat && chat.id) || BlOrderChatApp.NEW_CHAT_ID,
ord_id: this.props.ordId,
users: (chat && chat.users && (isArrayAble(chat.users) ? chat.users : arrayToArrayAbleItemsOrder(chat.users))) || newEmptyArrayAble(),
messages: (chat && chat.messages && (isArrayAble(chat.messages) ? chat.messages : arrayToArrayAbleItemsOrder(chat.messages))) || newEmptyArrayAble(),
first_message_id: (chat && chat.first_message_id) || null,
typing_users_ids_map: (chat && chat.typing_users_ids_map) || {},
}
return newChat
}
isChatNew(chat) {
return (
chat
&&
(chat.id == BlOrderChatApp.NEW_CHAT_ID || this.state.newChatsIdsMap[chat.id])
)
}
loadPreviousChatMessages(chatId, lowestMessageIdOrNull, makeChatIdCurrent) {
this.POST({
act: 'loadPreviousChatMessages',
chat_id: chatId,
lowest_message_id: lowestMessageIdOrNull,
max_number_of_messages_to_load: BlOrderChatApp.MAX_NUMBER_OF_MESSAGES_TO_LOAD_PER_AJAX
}, json => {
this.setState(prevState => {
const chat = prevState.chats.items[chatId]
const messages = arrayToArrayAbleItemsOrder(json.messages)
const newChat = {
...chat,
messages: mergeArrayAbles(messages, chat.messages)
}
const chats = mergeArrayAbles(prevState.chats, newArrayAble(newChat))
return {
...(makeChatIdCurrent ?
{
currentChatId: chatId,
focusSendMessageTextarea: true,
}
:
{
currentChatId: prevState.currentChatId,
}
),
chats,
isCurrentChatLoading: false,
}
})
})
}
loadPreviousChatMessagesIfNotAllLoaded(chatId) {
let lowestMessageIdOrNull
const chat = this.state.chats.items[chatId]
if (
!this.isChatNew(chat)
&&
(lowestMessageIdOrNull = (chat.messages.order.length && firstOfArrayAble(chat.messages).id) || null)
&&
lowestMessageIdOrNull != chat.first_message_id
) {
this.setState({
isCurrentChatLoading: true
}, () => {
this.loadPreviousChatMessages(chat.id, lowestMessageIdOrNull)
})
}
}
handleLoadPreviousChatMessages(chatId) {
this.loadPreviousChatMessagesIfNotAllLoaded(chatId)
}
// ...
render() {
const currentChat = this.state.chats.items[this.state.currentChatId] || null
const err = this.state.err
return (
<div className="bl-order-chat-app">
<BlOrderChatBox currentUser={this.currentUser}
chats={arrayAbleItemsOrderToArray(this.state.chats)}
currentChat={currentChat}
isCurrentChatLoading={this.state.isCurrentChatLoading}
onLoadPreviousChatMessages={this.handleLoadPreviousChatMessages}
err={err} />
</div>
)
}
}
I tried to remove all the irrelevant code to simplify the reading. Also here is the file which contains the chatSelector function (normalizes the chat array-able object) and the *ArrayAble* functions (an array-able object to me is basically an object which maps objects through their ids in items and has an order property which keeps the sort):
import { isUndefined, unshiftArray, findIndex } from "../utils";
export function chatSelector(chat, currentUser) {
const newChat = { ...chat }
newChat.messages = arrayAbleItemsOrderToArray(chat.messages).sort((a, b) => {
const sortByUnixTs = a.sent_unix_ts - b.sent_unix_ts
if (sortByUnixTs == 0) {
return a.id - b.id
}
return sortByUnixTs
})
newChat.users = arrayAbleItemsOrderToArray(chat.users).filter(user => user.id != currentUser.id)
return newChat
}
/**
* Given an array-able object, returns its array representation using an order property.
* This function acts as a selector function.
*
* The array-able object MUST have the following shape:
*
* {
* items: {},
* order: []
* }
*
* Where "items" is the object containing the elements of the array mapped by values found in "order"
* in order.
*
* #see https://medium.com/javascript-in-plain-english/https-medium-com-javascript-in-plain-english-why-you-should-use-an-object-not-an-array-for-lists-bee4a1fbc8bd
* #see https://medium.com/#antonytuft/maybe-you-would-do-something-like-this-a1ab7f436808
*
* #param {Object} obj An object.
* #param {Object} obj.items The items of the object mapped by keys.
* #param {Array} obj.order The ordered keys.
* #return {Array} The ordered array representation of the given object.
*/
export function arrayAbleItemsOrderToArray(obj) {
const ret = []
for (const key of obj.order) {
if (!isUndefined(obj.items[key])) {
ret[ret.length] = obj.items[key]
}
}
return ret
}
export function arrayToArrayAbleItemsOrder(array, keyProp = "id") {
const obj = newEmptyArrayAble()
for (const elem of array) {
const key = elem[keyProp]
obj.items[key] = elem
obj.order[obj.order.length] = key
}
return obj
}
export function newEmptyArrayAble() {
return {
items: {},
order: []
}
}
export function isEmptyArrayAble(arrayAbleObj) {
return !arrayAbleObj.order.length
}
export function mergeArrayAbles(arrayAbleObj1, arrayAbleObj2, prependObj2 = false) {
const obj = newEmptyArrayAble()
for (const key of arrayAbleObj1.order) {
if (isUndefined(arrayAbleObj1.items[key])) {
continue
}
obj.items[key] = arrayAbleObj1.items[key]
obj.order[obj.order.length] = key
}
for (const key of arrayAbleObj2.order) {
if (isUndefined(arrayAbleObj2.items[key])) {
continue
}
if (!(key in obj.items)) {
if (!prependObj2) {
// Default.
obj.order[obj.order.length] = key
}
else {
unshiftArray(obj.order, key)
}
}
obj.items[key] = arrayAbleObj2.items[key]
}
return obj
}
export function newArrayAble(initialItem = void 0, keyProp = "id") {
const arrayAble = newEmptyArrayAble()
if (initialItem) {
arrayAble.items[initialItem[keyProp]] = initialItem
arrayAble.order[arrayAble.order.length] = initialItem[keyProp]
}
return arrayAble
}
export function lastOfArrayAble(obj) {
return (
(
obj.order.length
&&
obj.items[obj.order[obj.order.length - 1]]
)
||
void 0
)
}
Thank you for your help. If there's something missing which I should have included, please, let me know!
UPDATE: Thanks to Sultan H. it has improved, though the scroll still blocks as soon as I get the reply from the server. See it here: https://streamable.com/3nzu0
Any idea on how to improve this behaviour further?
Thanks!

Here is an attempt to resolve the performance issue, it's not preferrable to do tasks inside the Arrow Function that calculates the new state, in this case, at loadPreviousChatMessages you are calculating stuff in the callback, which may yeild to a load while setting the state on that context.
Preferrable Changes, replace this.setState inside your function with this code, all I've done here is clear the context by moving all the tasks out:
const chat = this.state.chats.items[chatId];
const messages = arrayToArrayAbleItemsOrder(json.messages);
const newChat = {
...chat,
messages: mergeArrayAbles(messages, chat.messages);
}
const chats = mergeArrayAbles(prevState.chats, newArrayAble(newChat));
const newState = {
...(
makeChatIdCurrent ?
{
currentChatId: chatId,
focusSendMessageTextarea: true,
}
:
{
currentChatId: this.state.currentChatId,
}
),
chats,
isCurrentChatLoading: false,
};
this.setState(() => newState);
If that doesn't entirely solve the issue, can you tell if there was at least an improvment?

Rotating 3 pages in React

This is what I've been trying right now, but it keeps rendering the same page after the first switch.
I tried to follow the react lifecycle to figure it out, but it doesn't work as I intended.
I want it to start from RepoPage -> TimerPage -> ClockPage -> RepoPage and so on.
How can I fix it?
EDIT:
const REPO_PAGE = '5_SECONDS';
const COUNTDOWN_PAGE = '15_SECONDS';
const TIME_PAGE = '15_SECONDS';
const RepoComponent = () => (
<div>REPO</div>
);
const SprintCountComponent = () => (
<div>TIMER></div>
);
const DateTimeComponent = () => (
<div>CLOCK</div>
);
class App extends Component {
constructor(props) {
super(props);
this.state = {
repoTitles: [],
userData: [],
commitData: [],
recentTwoData: [],
currentPage: REPO_PAGE,
imgURL: ""
};
}
componentDidUpdate() {
const {currentPage} = this.state;
const isRepoPage = currentPage === REPO_PAGE;
const isTimePage = currentPage === TIME_PAGE;
if (isRepoPage) {
this._showDateTimePageDelayed();
} else if (isTimePage) {
this._showCountDownPageDelayed();
} else {
this._showRepoPageDelayed();
}
}
componentDidMount() {
this._showCountDownPageDelayed();
};
_showCountDownPageDelayed = () => setTimeout(() => {this.setState({currentPage: COUNTDOWN_PAGE})}, 5000);
_showRepoPageDelayed = () => setTimeout(() => {this.setState({currentPage: REPO_PAGE})}, 5000);
_showDateTimePageDelayed = () => setTimeout(() => {this.setState({currentPage: TIME_PAGE})}, 5000);
render() {
const {currentPage} = this.state;
const isRepoPage = currentPage === REPO_PAGE;
const isTimePage = currentPage === TIME_PAGE;
if(isRepoPage) {
return <RepoComponent/>;
} else if(isTimePage) {
return <DateTimeComponent/>;
} else {
return <SprintCountComponent/>;
}
}
}

You did not have return or else so this._showCountDownPageDelayed() is always executed.
if (isRepoPage) {
this._showDateTimePageDelayed();
} else if(isTimePage) {
this._showRepoPageDelayed();
} else {
this._showCountDownPageDelayed();
}
Using setInterval might give you a cleaner solution.
Edit: Your logic causes it to alternate between RepoPage and TimePage. A quick fix would be:
if (isRepoPage) {
this._showDateTimePageDelayed();
} else if (isTimePage) {
this._showCountDownPageDelayed();
} else {
this._showRepoPageDelayed();
}

React-Bootstrap - Pagination not showing

I'm using the react-bootstrap to paginate the result. It is rendering the div #content, but it is not showing nothing more. It is showing only a empty div with width, height and background color as I configured on the CSS file. I would like to display the pagination showing one house per page. The result of data from JSON is catched successfully. How can I solve the pagination issue? Thanks!
import React, { Component } from 'react'
import axios from 'axios'
import { Pagination } from 'react-bootstrap'
const URL_HOUSES = 'http://localhost:3001/houses';
class Casas extends Component {
constructor(props) {
super(props)
this.state = {
houses: []
}
this.handlePageChange = this.handlePageChange.bind(this)
}
getNumPages(currentPage) {
{ this.handlePageChange }
this.setState({
per_page: this.props.results ,
currentPage: currentPage + 1 ,
previousPage: currentPage - 1
});
}
handlePageChange(page, evt) {
const currentPage = this.state.currentPage || 1;
const numPages = this.getNumPages();
const pageLinks = [];
if (currentPage > 1) {
if (currentPage > 2) {
pageLinks.push(1);
pageLinks.push(' ');
}
pageLinks.push(currentPage - 1);
pageLinks.push(' ');
}
for (let i = 1; i <= numPages; i++) {
const page = i;
pageLinks.push(page);
}
if (currentPage < numPages) {
pageLinks.push(' ');
pageLinks.push(currentPage + 1);
if (currentPage < numPages - 1) {
pageLinks.push(' ');
pageLinks.push(numPages);
}
}
this.setState({ currentPage: currentPage + 1 } );
this.setState({ previousPage: currentPage - 1 } );
}
componentDidMount() {
axios.get(URL_HOUSES)
.then(res => {
this.setState({ houses: res.data })
})
}
render() {
const per_page = "1";
const paginationData = this.state.houses
let numPages = Math.ceil(paginationData.length / per_page);
if (paginationData.length % per_page > 0) {
numPages++;
}
return (
<div>
{this.state.houses.map(item =>
<div>
<h2>{item.name}</h2>
<p>{item.description}</p>
<ul>
{
item.photos.map(photo => <li>{photo}</li>)
}
</ul>
</div>
)}
<Pagination id="content" className="users-pagination pull-right"
bsSize="medium"
first last next prev boundaryLinks items={numPages}
activePage={ this.state.currentPage } onSelect={ this.handlePageChange
} />
</div>
)
}
}
export default Houses;

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Pagination from "react-js-pagination";
require("bootstrap/less/bootstrap.less");
class App extends Component {
constructor(props) {
super(props);
this.state = {
activePage: 1,
itemPerPage: 3,
productList: [],
duplicateProductList: []
};
}
componentDidMount() {
let d = '';
$.get("YOUR API", function (data) {
d = data;
this.setState({
projectList: d,
duplicateProductList: d
});
}.bind(this));
}
handlePageChange(pageNumber) {
this.setState({ activePage: pageNumber });
}
render() {
const { projectList, activePage, itemPerPage } = this.state;
const indexOfLastTodo = activePage * itemPerPage;
const indexOfFirstTodo = indexOfLastTodo - itemPerPage;
const renderedProjects = projectList.slice(indexOfFirstTodo, indexOfLastTodo);
return (
<div>
<div>
YOUR LIST
</div>
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={this.state.itemPerPage}
totalItemsCount={this.state.duplicateProductList.length}
pageRangeDisplayed={5}
onChange={this.handlePageChange.bind(this)}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Can you follow this link https://www.npmjs.com/package/react-js-pagination