We Keep Coding

Why is React.memo not working with useEffect?

I'm kind of new to react, so what i wanted was that, I have a toggle button to toggle a persons component and I have a cockpit component. But whenever I toggle the persons component, I don't want to always re-render the cockpit component.
So this is my Cockpit.js component file.
import React, { useEffect } from 'react';
import classes from './Cockpit.css';
const cockpit = props => {
useEffect(() => {
console.log('[Cockpit.js] useEffect');
// Http request...
setTimeout(() => {
alert('Saved data to cloud!');
}, 1000);
return () => {
console.log('[Cockpit.js] cleanup work in useEffect');
};
}, []);
useEffect(() => {
console.log('[Cockpit.js] 2nd useEffect');
return () => {
console.log('[Cockpit.js] cleanup work in 2nd useEffect');
};
});
// useEffect();
const assignedClasses = [];
let btnClass = '';
if (props.showPersons) {
btnClass = classes.Red;
}
if (props.personsLength <= 2) {
assignedClasses.push(classes.red); // classes = ['red']
}
if (props.personsLength <= 1) {
assignedClasses.push(classes.bold); // classes = ['red', 'bold']
}
return (
<div className={classes.Cockpit}>
<h1>{props.title}</h1>
<p className={assignedClasses.join(' ')}>This is really working!</p>
<button className={btnClass} onClick={props.clicked}>
Toggle Persons
</button>
</div>
);
};
export default React.memo(cockpit);
And this is my App.js
import React, { Component } from 'react';
import Persons from '../Components/Persons/Persons';
import classes from './App.css';
import Cockpit from '../Components/Cockpit/Cockpit'
class App extends Component {
constructor(props) {
super(props);
console.log("[App.js] constructor");
}
state = {
persons: [{id: "abc", name: "", age: 45},
{id: "azz", name: "", age: 56},
{id: "asq", name: "", age: 62}],
showPersons: false,
showCockpit: true
}
static getDerivedStateFromProps(props, state) {
console.log("[App.js] getDerivedStateFromProps", props)
return state;
}
componentDidMount() {
console.log('[App.js] componentDidMount')
}
shouldComponentUpdate(nextProps, nextState) {
console.log('[App.js] shouldCompoentUpdate');
return true;
}
componentDidUpdate() {
console.log('[App.js] componentDidUpdate')
}
deletePersonHandler = (i) => {
const persons = [...this.state.persons];
persons.splice(i, 1);
this.setState({persons: persons})
}
switchNameHandler = (newName) => {
this.setState({persons: [{name: newName, age: 50}, {name: "Aysha", age: 56}, {name: "Momma", age: 62}]})
}
nameSwitchHandler = (event, id) => {
const personIndex = this.state.persons.findIndex(p => {
return p.id === id;
})
const person = {...this.state.persons[personIndex]}
person.name = event.target.value;
const persons = [...this.state.persons]
persons[personIndex] = person;
this.setState({persons: persons})
}
togglePersonHandler = () => {
let doesChange = this.state.showPersons;
this.setState({showPersons: !doesChange})
}
render() {
console.log("[App.js] render");
let person = null;
if(this.state.showPersons) {
person = (<Persons
persons={this.state.persons}
clicked={this.deletePersonHandler}
changed={this.nameSwitchHandler} />
);
}
return (
<div className={classes.App}>
<button onClick={() => this.setState({showCockpit: false})}>Remove Cockpit</button>
{this.state.showCockpit ? (<Cockpit
title={this.props.appTitle}
showPersons={this.state.showPersons}
personsLength={this.state.persons.length}
clicked={this.togglePersonHandler} />) : null}
{person}
</div>
);
}
}
export default App;
But even when I toggle it, useEffect in cockpit component still console logs in the browser console when its not supposed to. I can't seem to find what I am doing wrong.
As you can see in this image the useEffect component in cockpit still renders in the console......
Browser Console

React.memo will do a shallow equal comparison on the props object by default. That means it will check every top level item in the props for equality and if any of them changed it will re-render.
When you click your persons toggle button it will change showPersons in your App component wich is also a prop that you pass to <Cockpit>. Therefore it will re-render even with React.memo. If it wouldn't re-render it wouldn't correctly update your Button class adding or removing classes.Red because this is dependent on the showPersons prop.
It has nothing to do with your useEffect inside of cockpit which will only get called after it re-renders but doesn't cause it to re-render in the first place.

On the click of Toggle Persons, you are changing the state in App Component.
This results in the re-rendering of the App and Cockpit components.
useEffect(() => {
console.log('[Cockpit.js] 2nd useEffect');
return () => {
console.log('[Cockpit.js] cleanup work in 2nd useEffect');
};
});
The above code will trigger every render as you haven't provided dependency.
To fix this, you need to add a dependency to the above code.

Since showPersons change it detects it as changed props.
You can add an equality function in React.memo that tells react when to consider the memoization stale:
// Will only rerender when someValue changes
export default React.memo(Cockpit, (oldProps, newProps) => oldProps.someValue === newProps.someValue)

React-typing-animation is not re-rendered when state is changed

I have the following component
import React, { Component } from "react";
import Typing from "react-typing-animation";
export class InfoDisplayer extends Component {
infos = ["this is a test", "this is another test"];
updateDisplayedInfo() {
if (this.state.currentIndex >= this.infos.length) {
this.setState({
currentInfo: this.infos[0],
currentInfo: 0,
});
} else {
this.setState(prevState => ({
currentIndex: prevState.currentIndex + 1,
currentInfo: this.infos[prevState.currentIndex + 1],
}));
}
}
constructor(props) {
super(props);
this.state = {
currentInfo: this.infos[0],
currentIndex: 0,
};
this.updateDisplayedInfo = this.updateDisplayedInfo.bind(this);
}
render() {
return (
<Typing onFinishedTyping={this.updateDisplayedInfo}>
{this.state.currentInfo}
</Typing>
);
}
}
export default InfoDisplayer;
I'm using https://github.com/notadamking/react-typing-animation which is a component used for getting a text typing animation. It has a handler called onFinishedTyping which can be used to do something after the typing is done. I'm using it to change my component state to update the current info state.
Although that updateDisplayedInfo is called and currentInfo is updated, the component is not rendered again.
Why? I believe setState should re-render the component.
Addition: online code
Thanks to https://stackoverflow.com/users/11872246/keikai edit, you can use the react dev tools to see that the state has been changed after the first typing animation

Some notice points:
Add loop
Add Typing.Reset
Refer to document here
import ReactDOM from "react-dom";
import "./styles.css";
import React, { Component } from "react";
import Typing from "react-typing-animation";
import "./styles.css";
const infos = ["this is a test", "this is another test"];
export class InfoDisplayer extends Component {
constructor(props) {
super(props);
this.state = {
currentIndex: 0
};
}
componentDidUpdate() {
console.log(this.state.currentIndex);
}
updateDisplayedInfo = () => {
this.setState({ currentIndex: this.state.currentIndex === 0 ? 1 : 0 });
};
render() {
return (
<Typing onFinishedTyping={this.updateDisplayedInfo} loop>
{infos[this.state.currentIndex]}
<Typing.Reset count={1} delay={500} />
</Typing>
);
}
}
export default InfoDisplayer;
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<InfoDisplayer />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Why is my onChange event not working in React?

I am coding a simple search input component for an app that will eventually become larger, but I am at a loss for why the onChange prop associated with it isn't being called. Here I will show my search input component and the app component into which I import it:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class SearchInput extends Component {
static defaultProps = {
onChange: () => Promise.resolve(),
}
static propTypes = {
onChange: PropTypes.func,
value: PropTypes.string,
}
render() {
const { value } = this.props;
return (
<input className="search-input" type='text' onChange={this.handleChange} value={value}/>
)
}
handeChange = (e) => {
const { onChange } = this.props;
onChange(e);
}
}
And then here's my main app component (very simple still, and keep in mind that I have list-rendering functionality, but that isn't where my issue lies). I'm pretty sure the issue lies somewhere in the handleSearchDidChange method that I wrote up and tacked onto the onChange prop for the SearchInput component:
import React, { Component } from 'react';
import Container from './components/container'
import List from './components/list'
import SearchInput from './components/search-input';
// Styles
import './App.css';
export default class App extends Component {
constructor(props){
super(props)
this.state = {
searchValue: undefined,
isSearching: false,
}
// this.handleSearchDidChange = this.handleSearchDidChange.bind(this);
}
render() {
// in the main render, we render the container component (yet to be styled)
// and then call renderList inside of it. We need "this" because this is
// a class-based component, and we need to tell the component that we are
// using the method associated with this class
return (
<div className="App">
<Container>
{this.renderSearchInput()}
{this.renderList()}
</Container>
</div>
);
}
renderSearchInput = () => {
const { searchValue } = this.state;
return (<SearchInput onChange={this.handleSearchDidChange} value={searchValue}/>)
}
renderList = () => {
// return the list component, passing in the fetchData method call as the data prop
// since this prop type is an array and data is an array-type prop, this is
// acceptable
return <List data={this.fetchData()}/>
}
// possibly something wrong with this method?
handleSearchDidChange = (e) => {
const { target } = e;
const { value } = target;
this.setState({
searchValue: value,
isSearching: true,
});
console.log('value: ', value);
console.log('searchValue: ', this.state.searchValue);
console.log('-------------------------')
}
fetchData = () => {
// initialize a list of items
// still wondering why we cannot put the listItems constant and the
// return statement inside of a self-closing setTimeout function in
// order to simulate an API call
const listItems = [
{title: 'Make a transfer'},
{title: 'Wire money'},
{title: 'Set a travel notice'},
{title: 'Pop money'},
{title: 'Edit travel notice'},
{title: 'test money things'},
{title: 'more test money things'},
{title: 'bananas'},
{title: 'apples to eat'},
{title: 'I like CocaCola'},
{title: 'Christmas cookies'},
{title: 'Santa Claus'},
{title: 'iPhones'},
{title: 'Technology is amazing'},
{title: 'Technology'},
{title: 'React is the best'},
];
// return it
return listItems;
}

You have a typo! Missing the "l" in handleChange :)
handleChange = (e) => {
const { onChange } = this.props;
onChange(e);
}

i run your code in sandBox:
https://codesandbox.io/s/onchange-problem-37c4i
there is no issue with your functionality as far as i can see.
but in this case if onChange dose not work for you is because maybe inside of < SearchInput /> component you don't pass the value up to the parent element.
check the sandBox and notice to the SearchInput1 and SearchInput2

Not able to setstate with respect to array of objects: React JS

I am trying to map few fields in array of objects, here in this case it is fieldnames and sort order.
I am trying to achieve server side sorting functionality where in the server takes the field name and sort type whenever I click on a field. I just need to map the field names with the sort type(ASCENDING or DESCENDING) .
I have written a sample where I am maintaining a sample array of objects with type. And on click of that column need I need to decide its sorting order
Can someone help here , Just need to achieve the tagging of sort order with the field name
Sandbox: https://codesandbox.io/s/hopeful-wescoff-08x8x
import React from "react";
import ReactDOM from "react-dom";
import { render } from "react-dom";
interface IState {
sorting: any;
}
interface IProps {}
export default class App extends React.Component<IProps, IState> {
constructor(props: any) {
super(props);
this.state = {
sorting: [{ firstName: "" }, { lastName: "" }]
};
}
sortHandler = name => {
const sorting = Object.keys(this.state.sorting).reduce((obj, key) => {
if (key === name) {
obj[key] = this.state.sorting[key] === "ASC" ? "DESC" : "ASC";
} else {
obj[key] = "";
}
return obj;
}, {});
this.setState({ sorting }, () => console.log(this.state.sorting));
};
render() {
return (
<div>
<span onclick={this.sortHandler("firstName")}> FirstName</span>
<span onclick={this.sortHandler("lastName")}> LastName</span>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Your click-handlers get executed immediately on render and with the logic you have constructed this will cause the "Maximum update depth exceeded" error.
Pass an anonymous function that will call your sortHandler instead. This will make it so the sortHandler only gets executed when the user clicks the span:
render() {
return (
<div>
<span onclick={() => this.sortHandler("firstName")}> FirstName</span>
<span onclick={() => this.sortHandler("lastName")}> LastName</span>
</div>
);
}
See sandbox for example on how to sort by fieldnames: https://codesandbox.io/s/vigilant-haslett-c2z3f

import React from "react";
import ReactDOM from "react-dom";
//import { render } from "react-dom";
interface IState {
sorting: any;
}
interface IProps {}
export default class App extends React.Component<IProps, IState> {
constructor(props: any) {
super(props);
this.state = {
sorting: [{ firstName: "" }, { lastName: "" }]
};
}
sortHandler = (name => {
const sorting = Object.keys(this.state.sorting).reduce((obj, key) => {
if (key === name) {
obj[key] = this.state.sorting[key] === "ASC" ? "DESC" : "ASC";
} else {
obj[key] = "";
}
return obj;
}, {});
this.setState({ sorting }, () => console.log(this.state.sorting));
});
render() {
return (
<div>
<span onclick={() => this.sortHandler("firstName")}> FirstName</span>
<span onclick={() => this.sortHandler("lastName")}> LastName</span>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Few Highlighted issue on your code, please do not import the code if you're not using which can consume memory.
Arrow function dedicated to using the function on the scope.
Please check the scope of the variable if the variable required bind with scope
const sorting = Object.keys(this.state.sorting).reduce((obj, key) => {
Please make sure the calling function also requires the scope this to the function. I hope your problem is solved by the initial solution. its just additional notes

updating array in object properties

I have an object defined like this:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor() {
super();
this.state = {
lists: ["Dogs", "Cats"],
items: {Dogs:[], Cats:[]}
};
}
handleAddItem(item) {
console.log(this.props.idName);
console.log(item);
}
I have the variable
console.log(this.props.idName)// output: Dogs
console.log(item);// output {name: "lofi"}
I don't know how to update the object items{} to make it becоme like this:
items{Dogs:[{name: "lofi"}], Cats:[]}

To update a nested Array substate, you can use the spread operator to append elements
handleAddItem = item => {
this.setState((prevState, props) => ({
items: {
...prevState.items,
[props.idName]: [
...prevState.items[props.idName],
item
]
}
}))
}

What about something like that
handleAddItem(item) {
this.setState((s, p) => ({
items: {
...s.items,
[p.idName]: s.items[p.idName].concat([item])
}
}))
}
Few comments:
setState can take function, as parameter you got old state value
[idName]: value dynamically updates prop idName

You can do something like
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor() {
super();
this.state = {
lists: ["Dogs", "Cats"],
items: {Dogs:[], Cats:[]}
};
}
handleAddItem(item) {
console.log(this.props.idName);
console.log(item);
let oldItems = this.state.items;
oldItems[this.props.idName].push(item);
// Update new state for items
this.setState({
items: {...this.state.items}
})
}