We Keep Coding

useEffect with redux prop updates

I have a component that I can use multiple times on a page. What it does is make an external call and save a value from that external call to redux store in a key object. I only want the component to do this once so I was using the componentDidMount. Now if the same component gets used again on the page I don't want it to do the external call again. This works correctly using Classes but when I try to use function hooks this no longer works.
Let me start with showing you the Class based code.
class MyComponent extends Component {
componentDidMount() {
setTimeout(() => this.wait(), 0);
}
wait() {
const { key, map } = this.props;
if (map[key] === undefined) {
saveKey(key);
console.log('LOAD EXTERNAL ID ONLY ONCE');
externalAPI(this.externalHandler.bind(this));
}
}
externalHandler(value) {
const { key, setValue } = this.props;
setValue(key, value);
}
render() {
const { key, map children } = this.props;
return (
<>
{children}
</>
);
}
}
mapStateToProps .....
export default connect(mapStateToProps, { saveKey, setValue })(MyComponent);
Reducer.js
export default (state = {}, action = null) => {
switch (action.type) {
case SAVE_KEY: {
return {
...state,
[action.id]: 'default',
};
}
case SET_VALUE: {
const { id, value } = action;
return {
...state,
[id]: value,
};
}
default: return state;
}
};
Page.js
Calls each component like below.
import React from 'react';
const Page = () => {
return (
<>
<MyComponent key='xxxxx'>First Component</MyComponent>
<MyComponent key='xxxxx'>Second Component</MyComponent>
</>
);
};
export default Page;
The above all works. So when the first component mounts i delay a call to redux, not sure why this works but it does. Can someone tell me why using the setTimeout works??? and not using the setTimeout does not. By works I mean with the timeout, first component mounts sets key because map[key] === undefined. Second component mounts map[key] is no longer undefined. But without the timeout map[key] is always === undefined ?
It stores the passed key prop in redux. The Second component mounts and sees the same key is stored so it doesn't need to call the external API getExternalID again. If a third component mounted with a different key then it should run the external API call again and so on.
As I said the above all works except I'm not sure why I needed to do a setTimout to get it to work.
Second question turning this into a function and hooks instead of a Class. This does not work for some reason.
import React, { useEffect } from 'react';
const MyComponent = ({ children, key, map, saveKey, setValue }) => {
useEffect(() => {
setTimeout(() => delay(), 0);
}, [map[key]]);
const delay = () => {
if (map[key] === undefined) {
saveKey(key);
console.log('LOAD VARIANT ONLY ONCE');
externalAPI(externalHandler);
}
};
const externalHandler = (value) => {
setValue(key, value);
};
return (
<>
{children}
</>
);
};
export default MyComponent;

First question:
Javascript works with a single thread, so even when you use delay 0 ms, the method is called after React's render method exit. Here is an experiment that I believe explains that for that :
function log(msg){
$("#output").append("<br/>"+msg);
}
function render(){
log("In render");
log("Delayed by 0 ms without setTimeout...")
setTimeout(() =>log("Delayed by 0 ms with setTimeout..."), 0);
for(var i = 0;i<10;i++) log("Delay inside render "+i);
log("Render finish");
}
render();
https://jsfiddle.net/hqbj5xdr/
So actually all the components render once before they start checking if map[key] is undefined.
Second question:
In your example, it is not really clear where map and saveKey come from. And how map is shared between components...
Anyway, a naive solution is to directly update the map. And make sure that all component
refers to this map instance (not a copy).
if (map[key] === undefined) {
map[key]=true;
saveKey(key);
console.log('LOAD VARIANT ONLY ONCE');
externalAPI(externalHandler);
}
But that is a little bad (sharing reference). So a better design may be to use a cache. Don't pass the map, but a getter and a setter. getKey and saveKey. Underlying those methods may use a map to persist which key has been set.

State is changed, but component is not refreshed

I am changing the state and I can see in the console.log the new state, however, the TextArea does not show the new state, but only when its first displayed.
Here is my implementation:
import React, {Component} from 'react';
import {TextArea} from "semantic-ui-react";
class Output extends Component {
static myInstance = null;
state = { keys:[] }
updateState(){
// this method is called from outside..
this.setState({ keys:this.state.keys.push(0) });
// I can see that keys are getting increase
console.log(this.state.keys);
}
render() {
return (
<TextArea value={this.state.keys.length} />
);
}
}
TextArea will keep showing 0, although the length of state.keys increases..
Any idea?

Never mutate the state.
To update the state, use this syntax:
this.setState(prevState => ({
keys: [...prevState.keys, newItem]
}))

you dont call your updateState function to update your state , it just exists over there, for pushing 0 to your state in order to reRender your component with new state, you can call your method in componentDidMount like below:
componentDidMount = () => {
this.updateState()
}
this will excute your updateState function immediately after component mounts into the dom.

Here is the working example
Firstly you should call your function to update the state
Example on jsfiddle
class Output extends React.Component {
static myInstance = null;
state = { keys:[] }
componentDidMount(){
this.updateState();
}
updateState() {
const newKeys = [...this.state.keys,0]
this.setState({ keys:newKeys });
}
onTextareaChange(){}
render() {
return (
<textarea value={this.state.keys.length} onChange= {this.onTextareaChange} />
);
}
}
ReactDOM.render(<Output />, document.querySelector("#app"))

How to make an API call on props change?

I'm creating a hackernews-clone using this API
This is my component structure
-main
|--menubar
|--articles
|--searchbar
Below is the code block which I use to fetch the data from external API.
componentWillReceiveProps({search}){
console.log(search);
}
componentDidMount() {
this.fetchdata('story');
}
fetchdata(type = '', search_tag = ''){
var url = 'https://hn.algolia.com/api/v1/search?tags=';
fetch(`${url}${type}&query=${search_tag}`)
.then(res => res.json())
.then(data => {
this.props.getData(data.hits);
});
}
I'm making the API call in componentDidMount() lifecycle method(as it should be) and getting the data correctly on startup.
But here I need to pass a search value through searchbar component to menubar component to do a custom search. As I'm using only react (not using redux atm) I'm passing it as a prop to the menubar component.
As the mentioned codeblock if I search react and passed it through props, it logs react once (as I'm calling it on componentWillReceiveProps()). But if I run fetchData method inside componentWillReceiveProps with search parameter I receive it goes an infinite loop. And it goes an infinite loop even before I pass the search value as a prop.
So here, how can I call fetchdata() method with updating props ?
I've already read this stackoverflow answers but making an API call in componentWillReceiveProps doesn't work.
So where should I call the fetchdata() in my case ? Is this because of asynchronous ?
Update : codepen for the project

You can do it by
componentWillReceiveProps({search}){
if (search !== this.props.search) {
this.fetchdata(search);
}
}
but I think the right way would be to do it in componentDidUpdate as react docs say
This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).
componentDidMount() {
this.fetchdata('story');
}
componentDidUpdate(prevProps) {
if (this.props.search !== prevProps.search) {
this.fetchdata(this.props.search);
}
}

Why not just do this by composition and handle the data fetching in the main HoC (higher order component).
For example:
class SearchBar extends React.Component {
handleInput(event) {
const searchValue = event.target.value;
this.props.onChange(searchValue);
}
render() {
return <input type="text" onChange={this.handleInput} />;
}
}
class Main extends React.Component {
constructor() {
this.state = {
hits: []
};
}
componentDidMount() {
this.fetchdata('story');
}
fetchdata(type = '', search_tag = '') {
var url = 'https://hn.algolia.com/api/v1/search?tags=';
fetch(`${url}${type}&query=${search_tag}`)
.then(res => res.json())
.then(data => {
this.setState({ hits: data.hits });
});
}
render() {
return (
<div>
<MenuBar />
<SearchBar onChange={this.fetchdata} />
<Articles data={this.state.hits} />
</div>
);
}
}
Have the fetchdata function in the main component and pass it to the SearchBar component as a onChange function which will be called when the search bar input will change (or a search button get pressed).
What do you think?

Could it be that inside this.props.getData() you change a state value, which is ultimately passed on as a prop? This would then cause the componentWillReceiveProps function to be re-called.
You can probably overcome this issue by checking if the search prop has changed in componentWillReceiveProps:
componentWillReceiveProps ({search}) {
if (search !== this.props.search) {
this.fetchdata(search);
}
}

react component not render new data from redux store

I am using react and redux, i want to update my counter value in react view, i am able to console latest state of my redux store but it is not reflect in my react view.
const counter = (state = 0, action) => {
console.log(action);
if(action.type == "INCREMENT")
return state + 1;
if(action.type == "DECREMENT")
return state - 1;
else
return state; // return same state if action not identified
}
const {createStore} = Redux;
const store = createStore(counter);
class Counter extends React.Component {
constructor() {
super();
}
render() {
return (
<div>
<div>{this.props.state.getState()}</div>
<button onClick={this.props.onIncrement} >INC</button>
<button onClick={this.props.onDecrement} >DEC</button>
</div>
);
}
}
const render = () => {
ReactDOM.render(
<Counter
state={store}
onIncrement={
() => store.dispatch({ type : "INCREMENT" })
}
onDecrement={
() => store.dispatch({ type : "DECREMENT" })
}
/>,
document.querySelector('#counter'));
}
store.subscribe(function() {
console.log(store.getState())
});
render();
Demo

React doesn't automatically re-render the view every time some Javascript data changes, even if your view is bound to that data.
A React component only re-renders in a few cases:
You call this.setState({ ... }) inside the component
A parent React component is re-rendered
There are a few other ways to force a re-render, but they are not recommended because they are much slower and will make your app sluggish.
To correct your sample, do your data binding for actual data on the state object, rather than props. This way React knows to re-render just your component when the counter changes. This might not be very important in a small sample, but this is very important when you want to reuse your component or embed it in a larger page.
Then subscribe to your store, and in the callback invoke setState with any changes. That way React can decide when your re-render should actually happen.
class Counter extends React.Component {
constructor(props) {
super();
this.state = {counter: 0}; // Setup initial state
this.storeUpdated = this.storeUpdated.bind(this);
props.store.subscribe(this.storeUpdated); // Subscribe to changes in the store
}
storeUpdated() {
this.setState( // This triggers a re-render
{counter: this.props.store.getState()});
}
render() {
return (
<div>
<div>{this.state.counter}</div>
<button onClick={this.props.onIncrement} >INC</button>
<button onClick={this.props.onDecrement} >DEC</button>
</div>
);
}
}
After you've played with this for a while and gotten familiar with how Redux and React work, I suggest you check out this library:
Get the library here: https://github.com/reactjs/react-redux
See http://redux.js.org/docs/basics/UsageWithReact.html for a tutorial on this library
This handles the bridge between React and Redux in a much more clean way than you can achieve by manually doing all the bindings yourself.

Avoid recalculating variable on every render in React

I have a component ParentToDataDisplayingComponent that is creating a few lookups to help format data for a child component based on data in a redux store accessed by the parent of ParentToDataDisplayingComponent.
I am getting some lagging on the components rerendering, where the changing state has not affected this.props.dataOne or this.props.dataTwo - the data in these lookups is guaranteed the same as last render, but the data in props is not guaranteed to be the available (loaded from the backend) when the component mounts. mapPropsToDisplayFormat() is only called after all of the data passed in through the props is available.
I would like to declare the lookup variables once, and avoid re-keyBy()ing on every re-render.
Is there a way to do this inside the ParentToDataDisplayingComponent component?
export default class ParentToDataDisplayingComponent extends Component {
...
mapPropsToDisplayFormat() {
const lookupOne = _(this.props.dataOne).keyBy('someAttr').value();
const lookupTwo = _(this.props.dataTwo).keyBy('someAttr').value();
toReturn = this.props.dataThree.map(data =>
... // use those lookups to build returnObject
);
return toReturn;
}
hasAllDataLoaded() {
const allThere = ... // checks if all data in props is available
return allThere //true or false
}
render() {
return (
<div>
<DataDisplayingComponent
data={this.hasAllDataLoaded() ? this.mapPropsToDisplayFormat() : "data loading"}
/>
</div>
);
}
}

Save the result of all data loading to the component's state.
export default class ParentToDataDisplayingComponent extends Component {
constructor(props) {
super(props)
this.state = { data: "data loading" }
}
componentWillReceiveProps(nextProps) {
// you can check if incoming props contains the data you need.
if (!this.state.data.length && nextProps.dataLoaded) {
this.setState({ data: mapPropsToDisplayFormat() })
}
}
...
render() {
return (
<div>
<DataDisplayingComponent
data={this.state.data}
/>
</div>
);
}
}
I think depending on what exactly you're checking for in props to see if your data has finished loading, you may be able to use shouldComponentUpdate to achieve a similar result without saving local state.
export default class ParentToDataDisplayingComponent extends Component {
shouldComponentUpdate(nextProps) {
return nextProps.hasData !== this.props.hasData
}
mapPropsToDisplayFormat() {
...
toReturn = data.props.dataThree
? "data loading"
: this.props.dataThree.map(data => ... )
return toReturn;
}
render() {
return (
<div>
<DataDisplayingComponent
data={this.mapPropsToDisplayFormat()}
/>
</div>
);
}
}