Rerender Child without rendering parent component React js - reactjs

Question

I am learning React js. I need to rerender one of the child components from the parent component. One way is I can use setState for the matrix but the entire matrix which is parent component will be rerendered instead I want to rerender only one child component. This have added by code below.
Child.js
import React from 'react';
class Child extends React.Component {
constructor(props){
super(props);
this.state = {
text : ""
};
}
updateParent(text) {
if(text) {
this.setState({text : text});
}
}
render() {
return(
<div>Child {this.state.text}</div>
);
}
}
export default Child;
Parent.js
import React from 'react';
import Child from './Child'
class Parent extends React.Component {
constructor(props){
super(props);
this.state = {
table : [[<Child key={11}/>, <Child key={12}/>, <Child key={13}/>],
[<Child key={21}/>, <Child key={22}/>, <Child key={23}/>]],
i : 0,
j : 0
};
}
componentDidMount() {
this.timerID1 = setInterval(() => this.updateTable(), 1000);
}
updateTable() {
//this.state.table[this.state.i][this.state.j].updateParent("");
this.state.j++;
if( this.state.j % 3 == 0) {
this.state.i++;
this.state.i %= 2;
}
//this.state.table[this.state.i][this.state.j].updateParent("*");
// or tempTable[i][j] = <Child key={ij} text={"*"}/>; this.setState({table: tempTable});
this.state.j++;
}
createTable() {
let table = []
for(let i = 0; i < 2; i++) {
table.push( <div key={i} style={{display:"flex"}}>{this.state.table[0]}</div> )
}
return table;
}
render() {
return(
<div>{this.createTable()}</div>
);
}
}
export default Parent;

Answer 1

Don't store Child component instances in state, instead render them dynamically
You can implement Child as a PureComponent so that if no props or state change for it, it doesn't re-render
Do not mutate state directly like you do this.state.j++ and so on. Use setState
Parent.js
export default class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
table: this.createTableData(3),
i: 0,
j: 0
};
}
createTableData(size) {
const arr = new Array(size);
for (var i = 0; i < size; i++) {
arr[i] = new Array(size).fill("");
}
return arr;
}
componentDidMount() {
this.timerID1 = setInterval(() => this.updateTable(), 1000);
}
componentWillUnmount() {
clearInterval(this.timerID1);
}
updateTable() {
let { i, j, table } = this.state;
j++;
if (j % 3 == 0) {
i++;
i %= 2;
}
const newTable = table.map((tr, row) => {
return tr.map((td, col) => {
if (row == i && col == j) {
return "*";
} else {
return "";
}
});
});
j++;
this.setState({
table: newTable,
i,
j
});
}
createTable() {
return this.state.table.map((row, i) => {
return (
<div className="row">
{row.map((col, j) => {
return <Child key={`${i + 1}${j + 1}`} text={col} />;
})}
</div>
);
});
}
render() {
return <div>{this.createTable()}</div>;
}
}
Child.js
class Child extends React.PureComponent {
render() {
console.log("child rerender", this.props.text);
return <div>Child {this.props.text} </div>;
}
}
working demo
NOTE: The demo only contains the display and performance optimization logic along with the architecture, The logic to update the indexes i, j needs to be done by you in updateTable method.
If you look at the demo, only the cell you whose value changed from "" to "*" and vice versa will re-render, the rest will not

Answer 2

you can rerender child component without rendering parent component
by using ref to call child function from parent and update child component
Parent.js
import React from "react";
import Table from "./Table";
import Child from "./Child";
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.table = [
[<Child key={11} />, <Child key={12} />, <Child key={13} />],
[<Child key={21} />, <Child key={22} />, <Child key={23} />],
];
this.i = 0;
this.j = 0;
}
componentDidMount() {
this.timerID1 = setInterval(() => this.updateTable(), 1000);
}
updateTable() {
this.j++;
if (this.j % 3 == 0) {
this.i++;
this.i %= 2;
}
this.j++;
this.table[0].push(
<Child key={21} />,
<Child key={22} />,
<Child key={23} />
);
this.refs.table.updateTable(this.table[0]);
}
componentDidUpdate() {
console.log("component rerender");
}
render() {
return (
<div>
<h1>Parent Component</h1>
<Table ref="table" />
</div>
);
}
}
export default Parent;
Child.js
import React from 'react';
class Child extends React.Component {
constructor(props){
super(props);
this.state = {
text : ""
};
}
updateParent(text) {
if(text) {
this.setState({text : text});
}
}
render() {
return(
<div>Child {this.state.text}</div>
);
}
}
export default Child;
Table.js
import React, { Component } from "react";
class table extends Component {
state = {
table: [],
};
updateTable = (table) => {
this.setState({ table });
};
render() {
const { table } = this.state;
return (
<div>
{table.map((tableItem, i) => {
return <div key={i} style={{ display: "flex" }}>{tableItem}</div>;
})}
</div>
);
}
}
export default table;
componentDidUpdate will give log if rerendering is happen
Note: I did not use state in parent component. if you want to use parent component state then you have to stop rerendering by using shouldComponentUpdate lifecycle