I have the usual problem with infinite loop and I don't know why.
Im using reactJS 16.5.2
The loops generally occurs when you write a SetState where not allowed (for example in render method).
Im following this guide: https://medium.com/#baphemot/understanding-reactjs-component-life-cycle-823a640b3e8d
to pay attention about this issue.
I made several HOC(Decorators/Wrapper) components to concentrate general purpose methods in one point using props to propagate them to every children.
It generally works perfectly.
I tried to simplify my components structure below.
The problem is the FORM and its children.
One of the input has a DropDown that has to be populated with a method of the upper Wrapper. I put the call in componentDidMount(as the link above suggest). Unfortunally the wrapper setState seems to trigger a complete descrution and re-building of FORM Component. I put a console.log in every constructor from Wrapped to the form. Only the FORM and all its INPUTS are reacreated (and not updated).
This recreation generates an infinite loop because componentDidMountis triggered everytime.
I don't know how to fix this. I've checked every "key" properties and ALL components has their unique keys. I'm asking you WHY react recreate instead of update?
Is due to the form building method in parent render? And if so, which is the right design pattern to build a form with Async data population?
Simplify your life and instead of creating a bunch of wrappers, just create a single container-component that'll function the same way. For example, you would create a container that cares about data and state, then shares it and its methods with a reusable child component (as shown below, both function the same).
This would work exactly the same way with data fetched from an API. You'll retrieve data in componentDidMount, set it state, then pass down the state to the reuseable component.
You can get super granular with your reusable components. For example a reusable button that's sole purpose is to submit a form. Or a reusable input that only captures numbers between 1 and 100 and so on.
If your components are heavily nested, then consider using redux.
Working example: https://codesandbox.io/s/x2ol8wmzrp
containers/Form.js (container-component)
import React, { Component } from "react";
import Fields from "../components/Fields";
export default class Form extends Component {
state = {
buttonFields: [
{ id: "Apples", quantity: 1 },
{ id: "Strawberries", quantity: 1 },
{ id: "Grapes", quantity: 1 },
{ id: "Apricots", quantity: 1 }
]
};
handleButtonClick = id => {
this.setState(prevState => ({
buttonFields: prevState.buttonFields.map(
item =>
id === item.id ? { id, quantity: item.quantity + 1 } : { ...item }
)
}));
};
render = () => (
<Fields
{...this.state}
onButtonClick={this.handleButtonClick}
title="Container Component"
/>
);
}
components/Fields.js (reusable component)
import React from "react";
export default ({ buttonFields, onButtonClick, title }) => (
<div className="container">
<h1 style={{ textAlign: "center" }}>{title}</h1>
{buttonFields.map(({ id, quantity }) => (
<button
style={{ marginRight: 10 }}
className="uk-button uk-button-primary"
key={id}
onClick={() => onButtonClick(id)}
>
{id} ({quantity})
</button>
))}
</div>
);
containers/Wrapper.js (unnecessary wrapper)
import React, { Component } from "react";
export default WrappedComponent => {
class Form extends Component {
state = {
buttonFields: [
{ id: "Apples", quantity: 1 },
{ id: "Strawberries", quantity: 1 },
{ id: "Grapes", quantity: 1 },
{ id: "Apricots", quantity: 1 }
]
};
handleButtonClick = id => {
this.setState(prevState => ({
buttonFields: prevState.buttonFields.map(
item =>
id === item.id ? { id, quantity: item.quantity + 1 } : { ...item }
)
}));
};
render = () => (
<WrappedComponent
{...this.state}
onButtonClick={this.handleButtonClick}
title="Wrapper"
/>
);
}
return Form;
};
Thanking Matt Carlotta for his answer, I figure out what was the problem.
In the image above I simplified too much so I missed one important declaration.
In "FinalComponent" when I was creating the SomeFormComponent, due to its wrapping, I was doing something like this:
renderForm()
{
var WrappedFormComponent = FormHOC(SomeFormComponent();
return <WrappedFormComponent {...this.props} [...] />
}
It's obvious that with that syntax, the Form is instantatied every time due to renderForm method called in render method.
The solution is very simple. I moved that line above the component:
const WrappedFormComponent = FormHOC(SomeFormComponent();
export default class FinalComponent extends React.Component
Related
So let's say i have a todoStore. It has an action that deletes a todo by id. Note that i tried both filter and splice:
export default class TodosStore {
constructor() {
makeAutoObservable(this)
}
todos = [
{
id: 1,
name: "name1",
completed: true
},
{
id: 15,
name: "name2",
completed: true
},
{
id: 14,
name: "name3",
completed: true
}
]
removeTodo(id) {
// this.todos = this.todos.filter(todo=>todo.id != id)
for (let todo of this.todos) {
if (todo.id == id) {
const indexOf = this.todos.indexOf(todo)
this.todos.splice(indexOf, 1)
}
}
}
};
The consuming Todos component(Note that i'm wrapping the Todo with observer):
import { combinedStores } from "."
const ObservableTodo = observer(Todo);
export default observer(() => {
const { todosStore } = combinedStores
return (
<div >
{todosStore.todos.map(todo=>{
return(
<ObservableTodo onDelete={()=>{todosStore.removeTodo(todo.id)}} onNameChange={(value)=>{todosStore.editTodoName(todo.id,value)}} key={todo.id} todo={todo}></ObservableTodo>
)
})}
</div>
)
})
The simple Todo component:
export default ({todo,onNameChange,onDelete}) => {
return (
<div style={{padding:'10px',margin:'10px'}}>
<p>ID: {todo.id}</p>
<input onChange={(e)=>{onNameChange(e.target.value)}} value={todo.name}></input>
<p>Completed: {todo.completed ? 'true' : 'false'} <button onClick={onDelete} className="btn btn-danger">Delete</button></p>
</div>
)
}
Even though i'm clearly mutating(as opposed to constructing a new array) the todos array within the store, Todos component rerenders(i see it via console.logs),
and so does every remaining Todo component.
Is there any way around it? Is there anything wrong with my setup perhaps? I'm using latest Mobx(6) and mobx-react.
Todos component is supposed to rerender because it depends on todos array content (because it map's over it). So when you change todos content by adding or removing some todo - Todos component will rerender because it needs to render new content, new list of todos.
Each single Todo rerenders because you have not wrapped it with observer. It is a good practice to wrap every component which uses some observable state, and Todo is clearly the one that does.
You change the length of the todo array, so the map function kicks in. Then while you are iterating over the elements, you are passing new properties to the ObservableTodo component (onDelete, onChange) this will make the ObservableTodo always rerender.
Even though the component is a Mobx observable, it still follows the "React rules", and when react sees new references in component properties, it will render the component.
I am a React newbie and trying to learn it by building a simple quote generator where a quote is generated depending on the mood a user selects. The App component holds the state: quotes and moods (where each element is a nested object) and its children are Mood components.
Now, the state of the App component consists of four moods and what I would like to happen is: when a user clicks a button inside the Mood component, s/he is redirected to that mood's page and the Mood component's state is set to that particular mood.
The solution I worked out by myself is very crude and I'm looking for a way to make it more elegant/functional.
Here is the moods object that is the App's state:
const moods = {
mood1: {
type: 'upset',
image: 'abc.png',
},
mood2: {
type: 'unmotivated',
image: 'abc.png',
},
mood3: {
type: 'anxious',
image: 'abc.png',
},
}
the App component:
state ={
moods: moods,
}
render(){
return (
<div className="Container">
<ul className='moods'>
{
Object.keys(this.state.moods).map(key => <Mood
moodsData = {this.state.moods}
key={key}
indexKey = {key}
index={this.state.moods[key].type}
details={this.state.moods[key]}
/>)
}
</ul>
</div>
);}}
And this is how far I got inside the Mood component, where the onClick function on the button is:
handleClick = (e) => {
this.setState({moods: e.target.value});
}
I will be grateful for any pointers/suggestions! Spent so many hours on this I feel like my brain doesn't accept any more Youtube tutorials/Medium articles.
Well, the first thing i notice is that you are trying to use map on a javascript object instead of an array, this could bring some problems when using some functions, so i advice to make it an array.
If you just have one Mood component and based on the mood type it receives change its style, it doesn't actually need to manage state from inside, you can just pass the props to the Mood component and work around what props receives.
For example:
Moods as an array:
const moods = [
{
type: 'upset',
image: 'abc.png',
},
{
type: 'unmotivated',
image: 'abc.png',
},
{
type: 'anxious',
image: 'abc.png',
},
]
i'm assuming you get the Mood list from a server or an external source so that's why i'm keeping moods in state instead of just mapping through the const moods.
state ={
moods: moods,
mood:null,
}
onClick= (key) =>{
console.log(this.state.moods[key]);
this.setState({
mood:this.state.moods[key],
})
}
render(){
return (
<div className="Container">
<ul className='moods'>
{
Object.keys(this.state.moods).map((key) => <div key={key}>
<a onClick={() =>{this.onClick(key)}}>Click here to change the mood to {this.state.moods[key].type}</a>
</div>)
}
</ul>
{this.state.mood ? <Mood actualMood={this.state.mood}/> : null}
</div>
);
}
and the Mood component just gets some props and display something based on what it gets:
class Mood extends Component
{
render()
{
console.log(this.props.actualMood.type);
return (
<div>
<p>You're looking at {this.props.actualMood.type} mood</p>
</div>
);
}
}
this can be easily achieved using react hooks but class based components need a tricky solution and may not look easy at first glance.
If what you want to achieve is to move to another component, you can have a parent Component which only manages the state, then based on a condition (if mood has been selected) render a component either ChooseAMoodComponent or MoodComponent.
Another way to achieve this is through React Router which you can pass some params via URL get params.
but the best practice should be using Redux.
Prefacing this with a thought; I think I might require a recursive component but that's beyond my current ability with native js and React so I feel like I have Swiss cheese understanding of React at this point.
The problem:
I have an array of metafields containing metafield objects with the following structure:
{
metafields: [
{ 0:
{ namespace: "namespaceVal",
key: "keyVal",
val: [
0: "val1",
1: "val2",
2: "val3"
]
}
},
...
]
}
My code maps metafields into Cards and within each card lives a component <MetafieldInput metafields={metafields['value']} /> and within that component the value array gets mapped to input fields. Overall it looks like:
// App
render() {
const metafields = this.state.metafields;
return (
{metafields.map(metafield) => (
<MetafieldInputs metafields={metafield['value']} />
)}
)
}
//MetafieldInputs
this.state = { metafields: this.props.metafields}
render() {
const metafields = this.state;
return (
{metafields.map((meta, i) => (
<TextField
value={meta}
changeKey={meta}
onChange={(val) => {
this.setState(prevState => {
return { metafields: prevState.metafields.map((field, j) => {
if(j === i) { field = val; }
return field;
})};
});
}}
/>
))}
)
}
Up to this point everything displays correctly and I can change the inputs! However the change happens one at a time, as in I hit a key then I have to click back into the input to add another character. It seems like everything gets re-rendered which is why I have to click back into the input to make another change.
Am I able to use components in this way? It feels like I'm working my way into nesting components but everything I've read says not to nest components. Am I overcomplicating this issue? The only solution I have is to rip out the React portion and take it to pure javascript.
guidance would be much appreciated!
My suggestion is that to out source the onChange handler, and the code can be understood a little bit more easier.
Mainly React does not update state right after setState() is called, it does a batch job. Therefore it can happen that several setState calls are accessing one reference point. If you directly mutate the state, it can cause chaos as other state can use the updated state while doing the batch job.
Also, if you out source onChange handler in the App level, you can change MetafieldInputs into a functional component rather than a class-bases component. Functional based component costs less than class based component and can boost the performance.
Below are updated code, tested. I assume you use Material UI's TextField, but onChangeHandler should also work in your own component.
// Full App.js
import React, { Component } from 'react';
import MetafieldInputs from './MetafieldInputs';
class App extends Component {
state = {
metafields: [
{
metafield:
{
namespace: "namespaceVal",
key: "keyVal",
val: [
{ '0': "val1" },
{ '1': "val2" },
{ '2': "val3" }
]
}
},
]
}
// will never be triggered as from React point of view, the state never changes
componentDidUpdate() {
console.log('componentDidUpdate')
}
render() {
const metafields = this.state.metafields;
const metafieldsKeys = Object.keys(metafields);
const renderInputs = metafieldsKeys.map(key => {
const metafield = metafields[key];
return <MetafieldInputs metafields={metafield.metafield.val} key={metafield.metafield.key} />;
})
return (
<div>
{renderInputs}
</div>
)
}
}
export default App;
// full MetafieldInputs
import React, { Component } from 'react'
import TextField from '#material-ui/core/TextField';
class MetafieldInputs extends Component {
state = {
metafields: this.props.metafields
}
onChangeHandler = (e, index) => {
const value = e.target.value;
this.setState(prevState => {
const updateMetafields = [...prevState.metafields];
const updatedFields = { ...updateMetafields[index] }
updatedFields[index] = value
updateMetafields[index] = updatedFields;
return { metafields: updateMetafields }
})
}
render() {
const { metafields } = this.state;
// will always remain the same
console.log('this.props', this.props)
return (
<div>
{metafields.map((meta, i) => {
return (
<TextField
value={meta[i]}
changekey={meta}
onChange={(e) => this.onChangeHandler(e, i)}
// generally it is not a good idea to use index as a key.
key={i}
/>
)
}
)}
</div>
)
}
}
export default MetafieldInputs
Again, IF you out source the onChangeHandler to App class, MetafieldInputs can be a pure functional component, and all the state management can be done in the App class.
On the other hand, if you want to keep a pure and clean App class, you can also store metafields into MetafieldInputs class in case you might need some other logic in your application.
For instance, your application renders more components than the example does, and MetafieldInputs should not be rendered until something happened. If you fetch data from server end, it is better to fetch the data when it is needed rather than fetching all the data in the App component.
You need to do the onChange at the app level. You should just pass the onChange function into MetaFieldsInput and always use this.props.metafields when rendering
I am trying to solve a problem that happens in react app. In one of the views (components) i have a management tools that operate on big data. Basically when view loads i have componentDidMount that triggers ajax fetch that downloads array populated by around 50.000 records. Each array row is an object that has 8-10 key-value pairs.
import React, { Component } from "react";
import { List } from "react-virtualized";
import Select from "react-select";
class Market extends Component {
state = {
sports: [], // ~ 100 items
settlements: [], // ~ 50k items
selected: {
sport: null,
settlement: null
}
};
componentDidMount() {
this.getSports();
this.getSettlements();
}
getSports = async () => {
let response = await Ajax.get(API.sports);
if (response === undefined) {
return false;
}
this.setState({ sports: response.data });
};
getSettlements = async () => {
let response = await Ajax.get(API.settlements);
if (response === undefined) {
return false;
}
this.setState({ settlements: response.data });
};
save = (key, option) => {
let selected = { ...this.state.selected };
selected[key] = option;
this.setState({ selected });
};
virtualizedMenu = props => {
const rows = props.children;
const rowRenderer = ({ key, index, isScrolling, isVisible, style }) => (
<div key={key} style={style}>
{rows[index]}
</div>
);
return (
<List
style={{ width: "100%" }}
width={300}
height={300}
rowHeight={30}
rowCount={rows.length || 1}
rowRenderer={rowRenderer}
/>
);
};
render() {
const MenuList = this.virtualizedMenu;
return (
<div>
<Select
value={this.state.selected.sport}
options={this.state.sports.map(option => {
return {
value: option.id,
label: option.name
};
})}
onChange={option => this.save("sport", option)}
/>
<Select
components={{ MenuList }}
value={this.state.selected.settlement}
options={this.state.settlements.map(option => {
return {
value: option.id,
label: option.name
};
})}
onChange={option => this.save("settlement", option)}
/>
</div>
);
}
}
The problem i am experiencing is that after that big data is downloaded and saved to view state, even if i want to update value using select that has ~100 records it takes few seconds to do so. For example imagine that smallData is array of 100 items just { id: n, name: 'xyz' } and selectedFromSmallData is just single item from data array, selected with html select.
making a selection before big data loads takes few ms, but after data is loaded and saved to state it suddenly takes 2-4 seconds.
What would possibly help to solve that problem (unfortunately i cannot paginate that data, its not anything i have access to).
.map() creates a new array on every render. To avoid that you have three options:
store state.sports and state.settlements already prepared for Select
every time you change state.sports or state.settlements also change state.sportsOptions or state.settlementsOptions
use componentDidUpdate to update state.*Options:
The third option might be easier to implement. But it will trigger an additional rerender:
componentDidUpdate(prevProps, prevState) {
if (prevState.sports !== this.state.sports) {
this.setState(oldState => ({sportsOptions: oldState.sports.map(...)}));
}
...
}
Your onChange handlers are recreated every render and may trigger unnecessary rerendering of Select. Create two separate methods to avoid that:
saveSports = option => this.save("sport", option)
...
render() {
...
<Select onChange={this.saveSports}/>
...
}
You have similar problem with components={{ MenuList }}. Move this to the state or to the constructor so {MenuList} object is created only once. You should end up with something like this:
<Select
components={this.MenuList}
value={this.state.selected.settlement}
options={this.state.settlementsOptions}
onChange={this.saveSettlements}
/>
If this doesn't help consider using the default select and use a PureComponent to render its options. Or try to use custom PureComponents to render parts of the Select.
Also check React-select is slow when you have more than 1000 items
The size of the array shouldn't be a problem, because only the reference is stored in the state object, and react doesn't do any deep equality on state.
Maybe your render or componentDidUpdate iterates over this big array and that causes the problem.
Try to profile your app if this doesn't help.
I'm trying to understand how I can pass data from container to component. Right now I have a list of transactions in reducer, transactions sum is calculated in container and currently it is being displayed in the container. How do I pass my calculations to component and display it from there?
Code below is shortened to make it easier to read.
reducer:
const transactions = [
{
amount: 2,
},
{
amount: 1,
},
]
container:
#connect(state => ({
transactions: state.transactions,
}))
export default class Bank extends Component {
render() {
return (
<div>
<Balance amount={ this.props.transactions.reduce((sum, nextElement) => sum + nextElement.amount, 0)}/>
</div>
)
}
}
component:
const Balance = ({ amount }) => (
<div>
{amount}
</div>
)
Any help would be highly appreciated :)
Seems likely an issue with how your store is setup or with how your global state is being set. I would use redux dev tools to examine your state because your reduction is correct and you're passing in the prop correctly to your child component.
I belive you have to pass this.state.transactions instead props and initiallize the amount state in your class Balance calling like amount = this.props.amout