According to the docs:
componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.
We can use the new useEffect() hook to simulate componentDidUpdate(), but it seems like useEffect() is being ran after every render, even the first time. How do I get it to not run on initial render?
As you can see in the example below, componentDidUpdateFunction is printed during the initial render but componentDidUpdateClass was not printed during the initial render.
function ComponentDidUpdateFunction() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
console.log("componentDidUpdateFunction");
});
return (
<div>
<p>componentDidUpdateFunction: {count} times</p>
<button
onClick={() => {
setCount(count + 1);
}}
>
Click Me
</button>
</div>
);
}
class ComponentDidUpdateClass extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
componentDidUpdate() {
console.log("componentDidUpdateClass");
}
render() {
return (
<div>
<p>componentDidUpdateClass: {this.state.count} times</p>
<button
onClick={() => {
this.setState({ count: this.state.count + 1 });
}}
>
Click Me
</button>
</div>
);
}
}
ReactDOM.render(
<div>
<ComponentDidUpdateFunction />
<ComponentDidUpdateClass />
</div>,
document.querySelector("#app")
);
<script src="https://unpkg.com/react#16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>
We can use the useRef hook to store any mutable value we like, so we could use that to keep track of if it's the first time the useEffect function is being run.
If we want the effect to run in the same phase that componentDidUpdate does, we can use useLayoutEffect instead.
Example
const { useState, useRef, useLayoutEffect } = React;
function ComponentDidUpdateFunction() {
const [count, setCount] = useState(0);
const firstUpdate = useRef(true);
useLayoutEffect(() => {
if (firstUpdate.current) {
firstUpdate.current = false;
return;
}
console.log("componentDidUpdateFunction");
});
return (
<div>
<p>componentDidUpdateFunction: {count} times</p>
<button
onClick={() => {
setCount(count + 1);
}}
>
Click Me
</button>
</div>
);
}
ReactDOM.render(
<ComponentDidUpdateFunction />,
document.getElementById("app")
);
<script src="https://unpkg.com/react#16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>
You can turn it into custom hooks, like so:
import React, { useEffect, useRef } from 'react';
const useDidMountEffect = (func, deps) => {
const didMount = useRef(false);
useEffect(() => {
if (didMount.current) func();
else didMount.current = true;
}, deps);
}
export default useDidMountEffect;
Usage example:
import React, { useState, useEffect } from 'react';
import useDidMountEffect from '../path/to/useDidMountEffect';
const MyComponent = (props) => {
const [state, setState] = useState({
key: false
});
useEffect(() => {
// you know what is this, don't you?
}, []);
useDidMountEffect(() => {
// react please run me if 'key' changes, but not on initial render
}, [state.key]);
return (
<div>
...
</div>
);
}
// ...
I made a simple useFirstRender hook to handle cases like focussing a form input:
import { useRef, useEffect } from 'react';
export function useFirstRender() {
const firstRender = useRef(true);
useEffect(() => {
firstRender.current = false;
}, []);
return firstRender.current;
}
It starts out as true, then switches to false in the useEffect, which only runs once, and never again.
In your component, use it:
const firstRender = useFirstRender();
const phoneNumberRef = useRef(null);
useEffect(() => {
if (firstRender || errors.phoneNumber) {
phoneNumberRef.current.focus();
}
}, [firstRender, errors.phoneNumber]);
For your case, you would just use if (!firstRender) { ....
Same approach as Tholle's answer, but using useState instead of useRef.
const [skipCount, setSkipCount] = useState(true);
...
useEffect(() => {
if (skipCount) setSkipCount(false);
if (!skipCount) runYourFunction();
}, [dependencies])
EDIT
While this also works, it involves updating state which will cause your component to re-render. If all your component's useEffect calls (and also all of its children's) have a dependency array, this doesn't matter. But keep in mind that any useEffect without a dependency array (useEffect(() => {...}) will be run again.
Using and updating useRef will not cause any re-renders.
#ravi, yours doesn't call the passed-in unmount function. Here's a version that's a little more complete:
/**
* Identical to React.useEffect, except that it never runs on mount. This is
* the equivalent of the componentDidUpdate lifecycle function.
*
* #param {function:function} effect - A useEffect effect.
* #param {array} [dependencies] - useEffect dependency list.
*/
export const useEffectExceptOnMount = (effect, dependencies) => {
const mounted = React.useRef(false);
React.useEffect(() => {
if (mounted.current) {
const unmount = effect();
return () => unmount && unmount();
} else {
mounted.current = true;
}
}, dependencies);
// Reset on unmount for the next mount.
React.useEffect(() => {
return () => mounted.current = false;
}, []);
};
a simple way is to create a let, out of your component and set in to true.
then say if its true set it to false then return (stop) the useEffect function
like that:
import { useEffect} from 'react';
//your let must be out of component to avoid re-evaluation
let isFirst = true
function App() {
useEffect(() => {
if(isFirst){
isFirst = false
return
}
//your code that don't want to execute at first time
},[])
return (
<div>
<p>its simple huh...</p>
</div>
);
}
its Similar to #Carmine Tambasciabs solution but without using state :)
function useEffectAfterMount(effect, deps) {
const isMounted = useRef(false);
useEffect(() => {
if (isMounted.current) return effect();
else isMounted.current = true;
}, deps);
// reset on unmount; in React 18, components can mount again
useEffect(() => {
isMounted.current = false;
});
}
We need to return what comes back from effect(), because it might be a cleanup function. But we don't need to determine if it is or not. Just pass it on and let useEffect figure it out.
In an earlier version of this post I said resetting the ref (isMounted.current = false) wasn't necessary. But in React 18 it is, because components can remount with their previous state (thanks #Whatabrain).
I thought creating a custom hook would be overkill and I didn't want to muddle my component's readability by using the useLayoutEffect hook for something unrelated to layouts, so, in my case, I simply checked to see if the value of my stateful variable selectedItem that triggers the useEffect callback is its original value in order to determine if it's the initial render:
export default function MyComponent(props) {
const [selectedItem, setSelectedItem] = useState(null);
useEffect(() => {
if(!selectedItem) return; // If selected item is its initial value (null), don't continue
//... This will not happen on initial render
}, [selectedItem]);
// ...
}
This is the best implementation I've created so far using typescript. Basically, the idea is the same, using the Ref but I'm also considering the callback returned by useEffect to perform cleanup on component unmount.
import {
useRef,
EffectCallback,
DependencyList,
useEffect
} from 'react';
/**
* #param effect
* #param dependencies
*
*/
export default function useNoInitialEffect(
effect: EffectCallback,
dependencies?: DependencyList
) {
//Preserving the true by default as initial render cycle
const initialRender = useRef(true);
useEffect(() => {
let effectReturns: void | (() => void) = () => {};
// Updating the ref to false on the first render, causing
// subsequent render to execute the effect
if (initialRender.current) {
initialRender.current = false;
} else {
effectReturns = effect();
}
// Preserving and allowing the Destructor returned by the effect
// to execute on component unmount and perform cleanup if
// required.
if (effectReturns && typeof effectReturns === 'function') {
return effectReturns;
}
return undefined;
}, dependencies);
}
You can simply use it, as usual as you use the useEffect hook but this time, it won't run on the initial render. Here is how you can use this hook.
useNoInitialEffect(() => {
// perform something, returning callback is supported
}, [a, b]);
If you use ESLint and want to use the react-hooks/exhaustive-deps rule for this custom hook:
{
"rules": {
// ...
"react-hooks/exhaustive-deps": ["warn", {
"additionalHooks": "useNoInitialEffect"
}]
}
}
#MehdiDehghani, your solution work perfectly fine, one addition you have to do is on unmount, reset the didMount.current value to false. When to try to use this custom hook somewhere else, you don't get cache value.
import React, { useEffect, useRef } from 'react';
const useDidMountEffect = (func, deps) => {
const didMount = useRef(false);
useEffect(() => {
let unmount;
if (didMount.current) unmount = func();
else didMount.current = true;
return () => {
didMount.current = false;
unmount && unmount();
}
}, deps);
}
export default useDidMountEffect;
Simplified implementation
import { useRef, useEffect } from 'react';
function MyComp(props) {
const firstRender = useRef(true);
useEffect(() => {
if (firstRender.current) {
firstRender.current = false;
} else {
myProp = 'some val';
};
}, [props.myProp])
return (
<div>
...
</div>
)
}
You can use custom hook to run use effect after mount.
const useEffectAfterMount = (cb, dependencies) => {
const mounted = useRef(true);
useEffect(() => {
if (!mounted.current) {
return cb();
}
mounted.current = false;
}, dependencies); // eslint-disable-line react-hooks/exhaustive-deps
};
Here is the typescript version:
const useEffectAfterMount = (cb: EffectCallback, dependencies: DependencyList | undefined) => {
const mounted = useRef(true);
useEffect(() => {
if (!mounted.current) {
return cb();
}
mounted.current = false;
}, dependencies); // eslint-disable-line react-hooks/exhaustive-deps
};
For people who are having trouble with React 18 strict mode calling the useeffect on the initial render twice, try this:
// The init variable is necessary if your state is an object/array, because the == operator compares the references, not the actual values.
const init = [];
const [state, setState] = useState(init);
const dummyState = useRef(init);
useEffect(() => {
// Compare the old state with the new state
if (dummyState.current == state) {
// This means that the component is mounting
} else {
// This means that the component updated.
dummyState.current = state;
}
}, [state]);
Works in development mode...
function App() {
const init = [];
const [state, setState] = React.useState(init);
const dummyState = React.useRef(init);
React.useEffect(() => {
if (dummyState.current == state) {
console.log('mount');
} else {
console.log('update');
dummyState.current = state;
}
}, [state]);
return (
<button onClick={() => setState([...state, Math.random()])}>Update state </button>
);
}
ReactDOM.createRoot(document.getElementById("app")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<div id="app"></div>
And in production.
function App() {
const init = [];
const [state, setState] = React.useState(init);
const dummyState = React.useRef(init);
React.useEffect(() => {
if (dummyState.current == state) {
console.log('mount');
} else {
console.log('update');
dummyState.current = state;
}
}, [state]);
return (
<button onClick={() => setState([...state, Math.random()])}>Update state </button>
);
}
ReactDOM.createRoot(document.getElementById("app")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
<script crossorigin src="https://unpkg.com/react#18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.production.min.js"></script>
<div id="app"></div>
If you want to skip the first render, you can create a state "firstRenderDone" and set it to true in the useEffect with empty dependecy list (that works like a didMount). Then, in your other useEffect, you can check if the first render was already done before doing something.
const [firstRenderDone, setFirstRenderDone] = useState(false);
//useEffect with empty dependecy list (that works like a componentDidMount)
useEffect(() => {
setFirstRenderDone(true);
}, []);
// your other useEffect (that works as componetDidUpdate)
useEffect(() => {
if(firstRenderDone){
console.log("componentDidUpdateFunction");
}
}, [firstRenderDone]);
All previous are good, but this can be achieved in a simplier way considering that the action in useEffect can be "skipped" placing an if condition(or any other ) that is basically not run first time, and still with the dependency.
For example I had the case of :
Load data from an API but my title has to be "Loading" till the date were not there, so I have an array, tours that is empty at beginning and show the text "Showing"
Have a component rendered with different information from those API.
The user can delete one by one those info, even all making the tour array empty again as the beginning but this time the API fetch is been already done
Once the tour list is empty by deleting then show another title.
so my "solution" was to create another useState to create a boolean value that change only after the data fetch making another condition in useEffect true in order to run another function that also depend on the tour length.
useEffect(() => {
if (isTitle) {
changeTitle(newTitle)
}else{
isSetTitle(true)
}
}, [tours])
here my App.js
import React, { useState, useEffect } from 'react'
import Loading from './Loading'
import Tours from './Tours'
const url = 'API url'
let newTours
function App() {
const [loading, setLoading ] = useState(true)
const [tours, setTours] = useState([])
const [isTitle, isSetTitle] = useState(false)
const [title, setTitle] = useState("Our Tours")
const newTitle = "Tours are empty"
const removeTours = (id) => {
newTours = tours.filter(tour => ( tour.id !== id))
return setTours(newTours)
}
const changeTitle = (title) =>{
if(tours.length === 0 && loading === false){
setTitle(title)
}
}
const fetchTours = async () => {
setLoading(true)
try {
const response = await fetch(url)
const tours = await response.json()
setLoading(false)
setTours(tours)
}catch(error) {
setLoading(false)
console.log(error)
}
}
useEffect(()=>{
fetchTours()
},[])
useEffect(() => {
if (isTitle) {
changeTitle(newTitle)
}else{
isSetTitle(true)
}
}, [tours])
if(loading){
return (
<main>
<Loading />
</main>
)
}else{
return (
<main>
<Tours tours={tours} title={title} changeTitle={changeTitle}
removeTours={removeTours} />
</main>
)
}
}
export default App
const [dojob, setDojob] = useState(false);
yourfunction(){
setDojob(true);
}
useEffect(()=>{
if(dojob){
yourfunction();
setDojob(false);
}
},[dojob]);
I need a performant way to fetch data depending on different dependencies.
So, fetchPosts needs to run:
on load
when currentPage is changed
when currentTimeline is changed
and, when currentTimeline is changed, the currentPage needs to be set to 0 again, to start from scratch.
So what happens now:
The fetchposts gets called multiple times on load, which causes a massive amount of requests on the database.
Question:
how could I solve this, that it only calls the fetchPosts on load and only when currentpage/currentTimeline is changed.
And when currentTimeline is changed, the currentpage gets set to 0.
/* eslint-disable react-hooks/exhaustive-deps */
// #flow
import style from "./style.module.scss";
import React, { useState, useEffect, Suspense } from "react";
import { Grid, NoSsr } from "#material-ui/core";
import { Post as PostComponent } from "#components";
import type { Post } from "#types";
import { getPosts, addPosts } from "../../api/Posts";
import { TimelineFooter, PostCreation } from "#components";
import { Box } from "#material-ui/core";
import InfiniteScroll from "react-infinite-scroll-component";
import Typography from "#material-ui/core/Typography";
import { timelineState } from "#atoms";
import { useRecoilValue } from "recoil";
import { deletePost } from "../../api/Posts";
/**
* Timeline
*/
function Timeline() {
const [open, setOpen] = useState(false);
const [posts, setPosts] = useState([]);
const [hasMore, setHasMore] = useState(true);
const [currentPage, setCurrentPage] = useState(0);
const currentTimeline = useRecoilValue(timelineState);
const fetchPosts = () => {
getPosts(currentTimeline.tab, currentPage).then((result: *) => {
if (result.length > 0) {
setPosts(posts.concat(result));
setHasMore(true);
} else {
setHasMore(false);
}
});
};
useEffect(() => {
console.log("current page");
fetchPosts();
}, [currentPage]);
useEffect(() => {
console.log("current currentTimeline");
setPosts([]);
setCurrentPage(0);
}, [currentTimeline]);
useEffect(() => {
console.log("posts en currentpage");
if (posts.length === 0) {
if (currentPage !== 0) {
setCurrentPage(0);
} else {
fetchPosts();
}
}
}, [posts, currentPage]);
const fetchMoreData = () => {
setCurrentPage(currentPage + 1);
};
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const handlePostCreation = (message: string, files: Array<*>) => {
let formData = new FormData();
formData.append("content", message);
if (files) {
for (const file of files) {
formData.append("files", file);
}
}
formData.append("timelineCategory", currentTimeline.tab);
formData.append("regionName", "General");
addPosts(formData)
.then(() => {
setPosts([]);
})
.then(handleClose);
};
const onDeletePost = uuid => {
deletePost(uuid).then(() => {
const newposts = posts.filter(item => item.uuid !== uuid);
setPosts(newposts);
});
};
return (
<>
<Box pl={2} pr={2}>
<Grid container justify="center" className={style.fullWidth}>
<NoSsr>
<InfiniteScroll
style={{ width: "100%" }}
dataLength={posts.length}
next={fetchMoreData}
hasMore={hasMore}
loader={
<Box p={2} textAlign="center">
<Typography variant="subtitle2">
Meer laden...
</Typography>
</Box>
}
endMessage={
<Box p={2} textAlign="center">
<Typography variant="subtitle2">
Alle berichten geladen.
</Typography>
</Box>
}
>
<Suspense
fallback={
<span>Gebruikergegevens inladen...</span>
}
>
{posts.map((item: Post) => (
<Grid item xs={12} key={item.uuid}>
<PostComponent
post={item}
onDeletePost={onDeletePost}
/>
</Grid>
))}
</Suspense>
</InfiniteScroll>
</NoSsr>
</Grid>
</Box>
<TimelineFooter handleClickOpen={handleClickOpen} />
<PostCreation
open={open}
handleClose={handleClose}
handlePostCreation={handlePostCreation}
/>
</>
);
}
export default Timeline;
1. Infinite useEffect call.
You are calling fetch repeatedly because of this useEffect call (or, at least, this useEffect call).
You are running a useEffect with posts as dependency, while in your fetchPosts, you are calling setPosts, which triggers this useEffect, causing an infinite loop.
useEffect(() => {
console.log("posts en currentpage");
if (posts.length === 0) {
if (currentPage !== 0) {
setCurrentPage(0);
} else {
fetchPosts(); //<--- this triggers setPosts which triggers this useEffect call.
}
}
}, [posts, currentPage]);
This useEffect also triggers setCurrentPage(0) (which also triggers this useEffect) also triggers fetchPosts which also triggers setPosts which causes this to run indefinitely.
In Summary - is this useEffect necessary?
2. Unnecessary useEffect call.
The following may seem like a very normal use of useEffect in many situations, and looks very convenient, but it gets out of hand/control sometimes - E.g. your current situation, where you are manipulating your currentPage base on different conditions.
useEffect(() => {
console.log("current page");
fetchPosts();
}, [currentPage]);
You could have put your fetchPosts() here.
const fetchMoreData = () => {
setCurrentPage(currentPage + 1);
fetchPosts(currentPage +1);
};
and here
useEffect(() => {
console.log("current currentTimeline");
setPosts([]);
setCurrentPage(0);
fetchPosts(0);
}, [currentTimeline]);
Of course, you will need to update your fetchPost function to conditionally take in a parameter.
You could start by making some minor improvements like using the state update function to update currentPage as its value depends on previous state.
This way is recommended by react.
https://reactjs.org/docs/hooks-reference.html#usestate
const fetchMoreData = () => {
setCurrentPage(prevCurrentPage => prevCurrentPage + 1);
};
Comment inside this hook indicates thats it is for 'posts on current page'.
However 'posts' looks to be an array of total posts rather than posts per page.
useEffect(() => {
console.log("posts en currentpage");
if (posts.length === 0) {
if (currentPage !== 0) {
setCurrentPage(0);
} else {
fetchPosts();
}
}
}, [posts, currentPage]);
The above hook will also execute on mount as initially posts will be empty and currentPage will be 0.
So on load itself 'fetchPosts' will be called twice.
If you intend to keep track of all posts per page then you may want to rethink the logic here.
I want to build infinity scroll from scratch.Here is code:
import React,{useEffect, useRef, useState} from 'react';
const Container:React.FC<{}> = () => {
const containerRef = useRef<HTMLDivElement | null>(null)
const [ scrollNumber, setScrollNumber ] = useState<number>(1);
const [posts, setPosts] = useState<any[]>([]);
useEffect(() => {
async function main(){
const req = await fetch('https://jsonplaceholder.typicode.com/posts');
const result = await req.json();
const pst = result.splice(0,10*scrollNumber);
setPosts(pst)
function scrollHandler(){
if(containerRef.current?.getBoundingClientRect().bottom === window.innerHeight){
console.log("Salam", scrollNumber);
setScrollNumber(scrollNumber + 1);
}
}
window.addEventListener("scroll", scrollHandler);
return () => window.removeEventListener("scroll", scrollHandler);
}
main()
},[])
useEffect(() => {
const loadData = async () => {
const req = await fetch('https://jsonplaceholder.typicode.com/posts');
const result = await req.json();
const pst = result.splice(0,10*scrollNumber);
setPosts(pst)
}
loadData()
},[scrollNumber])
return (
<div ref={containerRef}>
{posts.map(post => (
<div key={post.id}>
<br/>
<h1>{post.title}</h1>
(<p>{post.body}</p>)
<code>{post.userId}</code>
<br/><br/>
<hr/>
</div>
))}
</div>
)
}
export default Container
But there is a problem. When I test it. it always updates to 2 nothing else. I searched for it. I found that window.addEventListener remembers only initialState that's why state always updates to 2. But I couldn't find any code solution.
inside the first useEffect the dependency array is empty, which mean if you use any state variable inside it, the value of it not gonna change inside the effect
As I see you are using scrollNumber to set the next state of setScrollNumber(scrollNumber + 1); and value of scrollNumber is not gonna change inside effect because of the dependency array is empty
So you have to tell the react to reinitialize the effect if you have any changes to the scrollNumber
so put scrollNumber as an dependency will work for you
useEffect(() => {
...
function scrollHandler(){
if(containerRef.current?.getBoundingClientRect().bottom === window.innerHeight) {
console.log("Salam", scrollNumber);
setScrollNumber(scrollNumber + 1);
}
}
window.addEventListener("scroll", scrollHandler);
return () => window.removeEventListener("scroll", scrollHandler);
.....
}, [scrollNumber]) //add a dependency
The following code throws the error "Maximum update depth exceeded" after clicking on the Toggle button.
It works after removing allJobs from the dependency array but I would like to understand why this error occurred and how to write it better.
Demo
import React from "react";
import { useQuery } from "#apollo/react-hooks";
import { gql } from "apollo-boost";
const JOBS = gql`
query Jobs($cursor: String) {
allJobs(first: 5, after: $cursor) {
pageInfo {
hasNextPage
endCursor
}
edges {
node {
id
jobTitle
}
}
}
}
`;
const Countries = () => {
const [visible, setVisible] = React.useState(false);
const [, setJobs] = React.useState([]);
const { loading, data } = useQuery(JOBS, {
fetchPolicy: "cache-and-network"
});
const allJobs = data ? data.allJobs.edges.map(edge => edge.node) : undefined;
React.useEffect(() => {
if (visible) {
setJobs(allJobs);
}
}, [visible, allJobs]);
const toggleVisible = () => {
setVisible(!visible);
};
if (loading) return <p>Loading...</p>;
return (
<>
<button onClick={toggleVisible}>Toggle</button>
{visible &&
allJobs.map(job => (
<div key={job.id}>
<p>{job.jobTitle}</p>
</div>
))}
</>
);
};
For better visibility:
Every single render, your allJobs variable is reassigned, either to your mapped nodes or to undefined. Since it's also a dependency of your effect, and your effect itself will cause a rerender (if visible is true), this forces the effect to fire recursively.
You can memoize allJobs to prevent recreating it on every render.
const allJobs = React.useMemo(() => {
return data ? data.allJobs.edges.map(edge => edge.node) : undefined;
}, [data]);
Demo
I'm trying to implement a data stream that has to use inner observables, where I use one from mergeMap, concatMap etc.
e.g.:
const output$$ = input$$.pipe(
mergeMap(str => of(str).pipe(delay(10))),
share()
);
output$$.subscribe(console.log);
This works fine when logging into console.
But when I try to use it in React like below utilizing useEffect and useState hooks to update some text:
function App() {
const input$ = new Subject<string>();
const input$$ = input$.pipe(share());
const output$$ = input$$.pipe(
mergeMap(str => of(str).pipe(delay(10))),
share()
);
output$$.subscribe(console.log);
// This works
const [input, setInput] = useState("");
const [output, setOutput] = useState("");
useEffect(() => {
const subscription = input$$.subscribe(setInput);
return () => {
subscription.unsubscribe();
};
}, [input$$]);
useEffect(() => {
const subscription = output$$.subscribe(setOutput);
// This doesn't
return () => {
subscription.unsubscribe();
};
}, [output$$]);
return (
<div className="App">
<input
onChange={event => input$.next(event.target.value)}
value={input}
/>
<p>{output}</p>
</div>
);
}
it starts acting weird/unpredictable (e.g.: sometimes the text is updated in the middle of typing, sometimes it doesn't update at all).
Things I have noticed:
If the inner observable completes immediately/is a promise that
resolves immediately, it works fine.
If we print to console instead of useEffect, it works fine.
I believe this has to do something with the inner workings of useEffect and how it captures and notices outside changes, but cannot get it working.
Any help is much appreciated.
Minimal reproduction of the case:
https://codesandbox.io/s/hooks-and-observables-1-7ygd8
I'm not quite sure what you're trying to achieve, but I found a number of problems which hopefully the following code fixes:
function App() {
// Create these observables only once.
const [input$] = useState(() => new Subject<string>());
const [input$$] = useState(() => input$.pipe(share()));
const [output$$] = useState(() => input$$.pipe(
mergeMap(str => of(str).pipe(delay(10))),
share()
));
const [input, setInput] = useState("");
const [output, setOutput] = useState("");
// Create the subscription to input$$ on component mount, not on every render.
useEffect(() => {
const subscription = input$$.subscribe(setInput);
return () => {
subscription.unsubscribe();
};
}, []);
// Create the subscription to output$$ on component mount, not on every render.
useEffect(() => {
const subscription = output$$.subscribe(setOutput);
return () => {
subscription.unsubscribe();
};
}, []);
return (
<div className="App">
<input
onChange={event => input$.next(event.target.value)}
value={input}
/>
<p>{output}</p>
</div>
);
}
I had a similar task but the goal was to pipe and debounce the input test and execute ajax call.
The simple answer that you should init RxJS subject with arrow function in the react hook 'useState' in order to init subject once per init.
Then you should useEffect with empty array [] in order to create a pipe once on component init.
import React, { useEffect, useState } from "react";
import { ajax } from "rxjs/ajax";
import { debounceTime, delay, takeUntil } from "rxjs/operators";
import { Subject } from "rxjs/internal/Subject";
const App = () => {
const [items, setItems] = useState([]);
const [loading, setLoading] = useState(true);
const [filterChangedSubject] = useState(() => {
// Arrow function is used to init Singleton Subject. (in a scope of a current component)
return new Subject<string>();
});
useEffect(() => {
// Effect that will be initialized once on a react component init.
// Define your pipe here.
const subscription = filterChangedSubject
.pipe(debounceTime(200))
.subscribe((filter) => {
if (!filter) {
setLoading(false);
setItems([]);
return;
}
ajax(`https://swapi.dev/api/people?search=${filter}`)
.pipe(
// current running ajax is canceled on filter change.
takeUntil(filterChangedSubject)
)
.subscribe(
(results) => {
// Set items will cause render:
setItems(results.response.results);
},
() => {
setLoading(false);
},
() => {
setLoading(false);
}
);
});
return () => {
// On Component destroy. notify takeUntil to unsubscribe from current running ajax request
filterChangedSubject.next("");
// unsubscribe filter change listener
subscription.unsubscribe();
};
}, []);
const onFilterChange = (e) => {
// Notify subject about the filter change
filterChangedSubject.next(e.target.value);
};
return (
<div>
Cards
{loading && <div>Loading...</div>}
<input onChange={onFilterChange}></input>
{items && items.map((item, index) => <div key={index}>{item.name}</div>)}
</div>
);
};
export default App;