Develop Reference

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. (React-js)

What i want is when i click on button the React component should re-render
And i also Don't want to re-Render the complete webiste on this particular component has to re-render
It tried using hooks to re-render the page but it gives me error as shown above and also tried using forceUpdate() Hook but that still gives me the same error
re-Render the component
This is the javascript of same file
const LeftCard = ({ cardData: cardComponent, getFileName }) => {
let emptyArr=[];
let pageNo=10;
const [loadComponentByPage,setPageArr]=useState(undefined);
if(pageNo){setPageArr(emptyArr);console.log(emptyArr)}
pageNo<10?pageNo=10:''
pageNo===10 ? pageChange(0):null
function pageChange(num){ <-------- This function is getting called on button click
if(cardComponent !==undefined) {
const mainArray=cardComponent.sort((a,b)=>b.id-a.id).map(val=>{return val});
const arrayLength=cardComponent.length;
if(pageNo===10 && num===-10)return;
if(arrayLength<pageNo && num ===10)return;
pageNo+=num
emptyArr=[]
for(let i=pageNo-10;i<=pageNo;i++){
if(mainArray[i]!==undefined){
emptyArr.push( mainArray[i])
}
}
}
}
if(loadComponentByPage ===undefined )return
This is jsx of same file
return (
<div>
{loadComponentByPage.sort((a, b) => (a.id - b.id))
.map((element, i) => {
return (
<div key={i}>
<span className="image-overflow flex ">
<img className="left-sec-image ml2 link Dim" src={element.image} alt={element.topicname}></img>
<div>
<h4 className=" ml4 mr2 light-purple">{element.topicname}</h4>
</div>
</span>
</div>
);
}).reverse()}
<div>
<div className='ml5'>
These are the button that calling the function-------> <button className='ml7' onClick={()=>{pageChange(-10);doNothing()}}><ArrowBackIosSharpIcon /></button>
These are the button that calling the function-------> <button className='ml6' onClick={()=>{pageChange(10);doNothing()}}><ArrowForwardIosSharpIcon /></button>
</div>
</div>
</div>
)};
export default LeftCard;

The problem you are having is that you've created an infinite loop of renders.
It's a common pitfall in React and is something to look out for.
In React, a component re-renders whenever one of these 2 cases occurs:
Whenever there is a change in the component's local state.
Whenever any of it's parent components themselves are re-rendered.
So what happens is the following:
When the component renders, the value of pageNo is 10, which is "truthy".
This means that we enter the if block and setPageArr is called, thus setting the component's state.
The component is re-rendered due to the state update.
The value of pageNo is still 10, so we enter the if block and set the state again.
And this cycle repeats, creating an infinite loop.
Typically, when faced with an infinite loop, the browser would freeze and ultimately crash.
The error you are getting is due to React "catching" the problem and preventing the freeze.
To fix it we have 2 options:
Since in this case we already know the initial value of the state is an empty array, we can simply initialize it as such.
Example:
const [loadComponentByPage,setPageArr]=useState([]);
If we don't know the initial value, such as the case with values fetched from an external API / etc.. We can utilize the useEffect hook.
Example:
useEffect(() => {
setPageArr(emptyArr)
}, []) // A `useEffect` hook with an empty dependency array should run only once when the component mounts.
Either way, this bit needs to go -> if(pageNo){setPageArr(emptyArr);console.log(emptyArr)}

useState element not rerendering when triggered by an event handler in a child component

I have a parent component with a useState that is being displayed. What I want to do is have a child component be able to update this state to change what the parent is displaying. I currently have the following:
function Parent() {
const [myWindow, setMyWindow] = useState(null)
useEffect(() => {
setMyWindow(<Child updateWindowFunc={() => setMyWindow(someNewWindow)} />)
}, []}
return (
<div>
{myWindow}
</div>
)
}
function Child({updateWindowFunc}) {
//Somehow calls updateWindowFunc
}
(Note that my actual code is set up somewhat differently, so don't mind the syntax as much as the general concept.)
I've found that I can get the value of myWindow to change, but the actual display doesn't show any change. I've tried forcing a re-render after the change, and adding a useRef to display useRef.current, but nothing seems to update which window is actually being rendered.
What am I doing wrong?
Edit:
I've found that it works if I switch to a different type of component, but if its just a different element of the same component then there is no re-render. I've been using React.createElement(), so I would think the 'objects' are distinct, but maybe I just misunderstand how this works.

Can you provide more details or working\not working code example that has more info?
Currently it's hard to get, cause that doesn't make any sense since you can just render it like below and that code will have same result as one that you are trying to run
function Parent() {
return (
<div>
<Child />
</div>
)
}
So for better understanding and fixing a problem \ finding a different approach, please, provide more details

Conditional Rendering in JSX not hiding the Element

So i have this react component which contains a conditional rendering in some part. so far so good and this practice has been acting as expected all throughout my app. but surprisingly the element we're talking is not getting hidden as a result of change in condition.let me provide you with a minimal representation of relevant code because the original component is too lengthy and cumbersome.
import React from 'react';
import AnotherComponent from '../components/AnotherComponent';
export class TheComponent extends Component {
/*
1. props.data is coming from mapping component state to redux connect
2. connect file and selectors are alright, because other parts of this component
work as expected, and even same props.data is used elsewhere in the component
3. a method wihtout input as in showAnotherComponent = () => false; will hide the
AnotherComponent element successfully. but even sth like
showAnotherComponent = (data) => false; will not work!!!
4. props.data is properly injected to the render method, console.log(props.data) in reder
method will display updated value.
5. props.data is never null or undefined and so on ..
*/
showAnotherComponent = data => data.flag === 'AAA';
render() {
console.log(this.props.data); // will show the updated props.data
return (
<div className="row">
<div className="col-md-10">
<h1>Some heading</h1>
</div>
<div className="col-md-2">
{/* the element in next line will always show up invariably, whatever the
content of props.data. tried ternary, same result. */}
{this.showAnotherComponent(this.props.data) && <AnotherComponent />}
</div>
</div>
);
}
}
export default TheComponent;
Unfortunately creating a fully working sample is a bit hard, considering all the third party dependencies and the redux wiring. Nevertheless, if you have ever run into similar situation and got to the bottom of it, please share your experience with me.
note: Updated props.data is passed to the component normally. in the react dev tools it shows up and in redux dev tools history of state is quite healthy. the only problem here is that the conditional won't hide the element in a falsy state.
UPDATE. the reason for this weird rendering was a dynamic loop in the same component rendering this AnotherComponent regardless of the flag value. what made it hard to pin down was that it was rendering it in map and passing index of dynamic string content. anyhow, thank you all and sorry for the possible misleading question.

It is working fine here.
You should check the data in your props if there is any flag key or not and if there is a flag key check that if it is AAA or not.
class App extends React.Component {
constructor() {
super();
this.state = {
data: "aa"
};
}
/*
1. props.data is coming from mapping component state to redux connect
2. connect file and selectors are alright, because other parts of this component
work as expected, and even same props.data is used elsewhere in the component
3. a method wihtout input as in showAnotherComponent = () => false; will hide the
AnotherComponent element successfully. but even sth like
showAnotherComponent = (data) => false; will not work!!!
4. props.data is properly injected to the render method, console.log(props.data) in reder
method will display updated value.
5. props.data is never null or undefined and so on ..
*/
showAnotherComponent = data => data.flag === "AAA";
render() {
console.log(this.props.data); // will show the updated props.data
return (
<div className="row">
<div className="col-md-10">
<h1>Some heading</h1>
</div>
<div className="col-md-2">
{/* the element in next line will always show up invariably, whatever the
content of props.data. tried ternary, same result. */}
{this.showAnotherComponent({ flag: this.state.data }) && (
<div>asdsdasd</div>
)}
</div>
<button onClick={() => this.setState({ data: "AAA" })}>Toggle</button>
</div>
);
}
}
ReactDOM.render(<App />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Click on Toggle and the Data will be displayed.

How to handle Ajax in pure function components in react?

I'm trying to write all my components as pure functions, but now I run into trouble. I have a component that looks somewhat like below. Trouble is, the result of the ajax request causes a rerender, which causes another ajax request, and there you have your infinite loop. How to properly handle this?
const PageProductFunnel = function (props) {
const agent = ajaxagent;
var list = [];
agent.get(`https://mylist.com/${productSKU}`).then((res) => {
list = res.data;
});
return (
<div>
<div className="cell">
<article className="article">
<h1 className="article-title">{product.name}</h1>
<FunnelStep {...props} list={list} />
<ButtonAddToCart product={product} />
</article>
</div>
</div>
);
};

There are few approaches you can take:
fetch async data globaly, not inside render of the component
Do not use pure function for this component, and hook async into life cycle methods

You need to use stateful components for this.
class PageProductFunnel extends React.Component {
state = {
"list": []
}
componentWillMount () {
agent.get(`https://mylist.com/${productSKU}`).then((res) => {
this.setState({list:res.data})
});
}
render () {
return (
<div>
<div className="cell">
<article className="article">
<h1 className="article-title">{product.name}</h1>
<FunnelStep {...props} list={this.state.list} />
<ButtonAddToCart product={product} />
</article>
</div>
</div>
);
}
};

EDIT Please read the comments. After some more considerations, I've decided to implement Davorin Ruševljans first suggestion. My own solution works but his is better.
Thanks for the suggestions but they really don't solve the problem. All my code is pure so far, and I really want to stick with it. Making the call on a global level doesn't change anything in my case as the response would still cause a render.
I changed the code so that the list is part of the state (I'm using redux). Only if the list is empty, I perform the ajax call. Whenever I know I expect new data, I clear the old list before the page renders again.
if (props.list.length === 0) {
agent.get(`https://mylist.com/${productSKU}`).then((res) => {
props.setList(res.data);
});
}

The better life cycle hook to do an ajax call is componentDidMount(). If you are so specific to use pure component you can use in pure Component as well.
class Sample extends PureComponent{
//react implement ShouldComponentUpdate for us which does shallow comparison
componentDidMount(){
//api call here
}
}
But You can't build a react app using only pureComponent, Because if there is a case where you wan't to stop the updation life cycle by checking the state, then you can't do that using PureComponent Because Pure component does only shallow checking for us and it checks for all the states in the component.
We should balance stateful, PureComponent, Stateless among the project.

React: update component's props from outside of render method without using state

Here is what I'm trying to achieve. I have two React components Product and ProductInfoPanel, shown inside a ProductList component. Product displays selected information about a product, such as product name, and price. When a product is clicked, more details will be shown in the ProductInfoPanel. So I need to pass wah twas clicked to the ProductInfoPanel.
Here is how I currently wire them up together. Each Product gets a click handler passed in, which passes back the product object when invoked, then that is passed into the ProductInfoPanel's props. The ProductList uses state to keep track of what was clicked, so when it changes, it triggers the re-rendering of the info panel.
class ProductList extends React.Component {
render() {
return (
<div>
<div className='content'>
<ul>
{ this.props.products.map((product, index) => {
return (
<li key={index}>
<Product product={product}
clickHandler={this.onProductClicked.bind(this)}/>
</li>
);
})}
</ul>
</div>
<div className='side-panel'>
<ProductInfoPanel product={this.state.selectedProduct} />
</div>
</div>
);
}
onProductClicked(clickedProduct) {
// Use the product object that was clicked, and updates the state.
// This updates the info panel content.
this.setState({ selectedProduct: clickedProduct });
}
}
Here is roughly how the two components are constructed.
class Product extends React.Component {
render() {
// Even though it needs only name and price, it gets the whole product
// object passed in so that it can pass it to the info panel in the
// click handler.
return (
<div onClick={this.onClicked.bind(this)}>
<span>{this.props.product.name}</span>
<span>{this.props.product.price}</span>
</div>
);
}
onClicked(e) {
this.props.clickHandler(this.props.product);
}
}
class ProductInfoPanel extends React.Component {
render() {
// Info panel displays more information about a product.
return (
<ul>
<li>{this.props.product.name}</li>
<li>{this.props.product.price}</li>
<li>{this.props.product.description}</li>
<li>{this.props.product.rating}</li>
<li>{this.props.product.review}</li>
</ul>
);
}
}
This is the best I could come up with, but using state to keep track of what product was clicked still sounds wrong to me. I mean, it's not really a state of a component, is it?
If I could update props of a referenced React component from outside of the render method, then I'd try to pass a reference to a ProductInfoPanel to each Product, so they could do update it in their click handler.
Is there a way to achieve what I want and avoid using state to keep track of what was clicked?

You could use a flux-like library like redux, or an alternative like mobx to remove state management from your component, but my personal feeling is to keep it as simple as possible until you really feel like there will be significant benefit in adding another layer of abstraction into your project.
I used to start off projects using redux by default but then one time I kicked myself as it turned out that the added complexity of introducing a redux implementation turned out to be overkill for what was actually a fairly small and simple project. I don't know if there is a hard line to know when you should shy away from using standard state and introduce another library to manage it for you, but I have learned that it's probably safest to do it the easiest and simplest way first until you genuinely feel there is actual benefit in bring in another dependency.
A few bits of advice on your current code...
You are binding your functions in the properties like so:
<Product product={product} clickHandler={this.onProductClicked.bind(this)}/>
When you call function bind it actually returns a new function instance, therefore React's reconciler will see it as a new prop coming into your component and will therefore always re-render the subcomponent tree. Something to be aware of. As an alternative approach you can do early binding in your constructor like so:
class ProductList extends React.Component {
constructor(props) {
super(props);
this.onProductClicked = this.onProductClicked.bind(this);
}
render() {
...
<li key={index}>
<Product product={product}
clickHandler={this.onProductClicked}/>
</li>
...
}
}
Additionally, where you are providing index as they unique key prop above - you should consider using a unique identifier from your product model (if it's available). That way if you add or remove items from the list React will have more information to know whether or not it should re-render all of the Product component instances.
For example:
render() {
...
{
this.props.products.map((product) =>
<li key={product.id}>
<Product product={product}
clickHandler={this.onProductClicked}/>
</li>
)
}
...
}
Read more about these concepts here:
https://facebook.github.io/react/docs/advanced-performance.html

I think it's fine. If there were more components that responded to changes in SelectedProduct, then the value of having the parent component control the state would be more apparent. In your case, it might not seem necessary, since only a single component changes.
However, if your Product also responded by highlighting the SelectedProduct, and a RecentlyViewedProducts list responded in some way to the SelectedProduct, then it would become evident that the SelectedProduct isn't the state of the ProductInfoPanel, but state of a higher level part of the application that it's an observer of.