React app not running useEffect when tab is not in focus - javascript

I have a react app receiving updates to all subscribed clients via socket,
When a new socket message comes in, I’m firing a dispatch action
io.on(EVENT, ({ someData }) => {
console.log(newDate());
dispatch(handleEventUpdate(someData));
});
This action only gets fired when the tab gets in focus.
The date log also matching the exact time the tab comes in focus, any ideas how to make this execute even when the tab is not in focus?
Since JS doesn’t run when tab is not in focus which I think is the issue, I’m Currently trying to use a service worker approach to handle this but I’m not sure where to start from.
Context
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import ChildComp from './ChildComp';
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import ChildComp from './ChildComp';
const ParentComp = () => {
const { data } = useSelector(
(state) => state,
);
return <ChildComp data={data} />;
};
export default ParentComp;
import React, { useEffect } from 'react';
const ChildComp = ({ data }) => {
useEffect(() => {
console.log('state changed');
console.log(data);
return () => {
console.log('component cleanup');
};
}, [data]);
return <p> {data} </p>;
};
export default ChildComp;
The parent gets the state data and passes to the child component. The update doesn't reflect if the tab isn't in focus until you go back to the tab.

You can try the following code simply by adding a dependency. The issue here is that you are not providing enough code...
io.on(EVENT, ({ someData }) => {
console.log(newDate());
dispatch(handleEventUpdate(someData));
}, [/*a value of foucus and not foucus that changes ! that will rerender the component*/]);

Related

Router push not working from within useEffect hook

I have the following component where I am expecting to go to another path via router's push method immediately cos router push is inside the useEffect` hook.
But router push never seems to happen. The ShowLoading component is just a loading screen (shows a loading spinner).
The page is just stuck on the loading spinner screen.
What am I doing wrong, why am I not being pushed to the new page? Pls advice. Thanks.
import React from 'react';
import Cookies from 'js-cookie';
import { ShowLoading } from '../../ShowLoading';
import { withRouter } from 'react-router';
const MyComponent = ({
router: { push, location },
}) => {
React.useEffect(() => {
// this cookie gets set thus clearly we are entering this useEffect.
Cookies.set('temp', '1');
const value = 'test';
const params = location.search ? `${location.search}` : '';
// seems like this has no effect, no pushing and moving to new page path.
push(`/${value}/my_path${params}`);
}, []);
return (<ShowLoading />);
};
export default (withRouter(MyComponent);
P.S: Goes to a new path as expected if I do the following but looking to do it via a router.
window.location.pathname = `/${value}/my_path${params}`;
You can get match, history and location as props when using withRouter. So you can get the push from history like this:
import React from 'react';
import Cookies from 'js-cookie';
import { ShowLoading } from '../../ShowLoading';
import { withRouter } from 'react-router';
const MyComponent = ({
history,
location
}) => {
React.useEffect(() => {
// this cookie gets set thus clearly we are entering this useEffect.
Cookies.set('temp', '1');
const value = 'test';
const params = location.search ? `${location.search}` : '';
history.push(`/${value}/my_path${params}`);
}, []);
return (<ShowLoading />);
};
export default withRouter(MyComponent);

How does this Firebase onAuthStateChanged work in this code

I have an abstract question about Firebase. Here in this code I wonder if the listener that is set up in the useEffect below is called if user is signed out?
I understand that when this code run the Firebase listener onAuthStateChanged below is attached and I wonder when user is signed out here or if user is signed out from another browser(signed in with the same credentials like Google/Facebook), will this code onAuthStateChanged run?
import React, { useEffect } from 'react';
import './App.scss';
import Dashboard from './pages/dashboard/dashboard.component';
import Login from './pages/login-page/login.component';
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import { connect } from 'react-redux';
import { setUser } from './Redux/User/user.actions';
import { selectUserSlice } from './Redux/User/user.selectors';
import { auth } from './firebase/firebase.utils';
const App = ({ setCurrentUser, currentUser }) => {
useEffect(() => {
const unSubscribeFromAuth = auth.onAuthStateChanged(user => {
setCurrentUser(user);
});
//cleanup function
return () => {
unSubscribeFromAuth();
}
},[setCurrentUser])
return(
<div className="App">
{
currentUser ? <Dashboard /> : <Login />
}
</div>
)
};
const mapDispatchToProps = dispatch => ({
setCurrentUser: user => dispatch(setUser(user)),
});
const mapStateToProps = state => ({
currentUser: selectUserSlice(state)
})
export default connect(mapStateToProps, mapDispatchToProps)(App);
With Firebase Authentication a user is signed in to that specific browser instance. So if the user signs in or out in one browser, it has no effect on any other browser instances.
Keep in mind that different tabs are part of the same browser instance, while even separate windows may be part of the same browser instance - depending on the browser and how the window was opened.
But for example, if the browser are on different machines, or if they're say Firefox, Edge and Chrome, the onAuthStateChanged listener on one of these browser instances will not be called with sign-in state changes that are caused by another one.

React Hook useEffect has a missing dependency, using Redux

Should I ignore 'React Hook useEffect has a missing dependency' warning?
Usually when I am getting data from an API this is what I do:
const Component = () => {
const [data,setData] = useState([]);
const getData = () => {
//Getting data and set data code...
}
useEffect(()=>{
getData();
},[]);
}
and recently I am trying out use redux to do the same thing(getting data from API) and I got this 'React Hook useEffect has a missing dependency' warning...
action:
import {GET_POSTS} from './types';
const getPosts = () => (dispatch) => {
const url = 'https://jsonplaceholder.typicode.com/posts';
fetch(url)
.then(res => res.json())
.then(data => {
dispatch({
type: GET_POSTS,
payload: data
});
});
}
export default getPosts;
reducer:
import {GET_POSTS} from '../actions/types';
const initialState = {
posts: []
}
const postsReducer = (state = initialState, action) => {
switch(action.type){
case GET_POSTS:
return {
...state,
posts: action.payload
}
default:
return state;
}
}
export default postsReducer;
app.js:
import React, {useEffect} from 'react';
import {connect} from 'react-redux';
import Hello from './components/Hello';
import getPost from './actions/postsAction';
import './App.css';
const App = ({getPost, dispatch}) => {
useEffect(() => {
getPost();
},[]);
return (
<div className='App'>
<Hello/>
</div>
);
};
const mapdispatchtoprops = (dispatch) => ({
dispatch,
getPost: () => {
dispatch(getPost());
}
});
export default connect(null, mapdispatchtoprops)(App);
Is there a way to fix this problem, I have tried to put dispatch inside the useEffect array but the warning still shows, like this:
useEffect(() => {
getPost();
},[dispatch]);
This is the full warning: React Hook useEffect has a missing dependency: 'getPost'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Tried to remove the useEffect array but I'll get infinite loop, it'll just keeps getting the data from the api(I only need it to run once).
Should I ignore the warning? if not, whats the best practice way to handle this problem?
I never got this kind of warning before when I left the useEffect array empty but got it recently, why?
The error message is telling you what you to do. Just add getData to the dependencies array like so: [dispatch, getData]. Anything external you reference within your useEffect (like a function) should be part of the dependency list so it can trigger the effect whenever the value changes. In your case it likely won't, but React is warning you just to be safe. Hope that helps!
You may want to start thinking from a different perspective. You are apparently trying to do side effect of loading data after component got rendered. So just inject your data via redux or propagation props from parent and remove array altogether. I.e.
const Component = ({posts}) => {
const getData = () => {
//Getting data and set data code...
}
useEffect(() => {
if (!posts) {
getData();
}
});
....
}
Your posts will be loaded once and useEffect's function should only care about posts is there or not.

Test conditionals and useEffect in React with Jest

I need to write a test with the following steps:
get user data on mount
get project details if it has selectedProject and clientId when they change
get pages details if it has selectedProject, clientId, and selectedPages when they change
render Content inside Switch
if doesn't have clientId, Content should return null
if doesn't have selectedProject, Content should return Projects
if doesn't have selectedPages, Content should return Pages
else Content should render Artboard
And the component looks like this:
import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { getUserData } from "../../firebase/user";
import { selectProject } from "../../actions/projects";
import { getItem } from "../../tools/localStorage";
import { getProjectDetails } from "../../firebase/projects";
import { selectPages } from "../../actions/pages";
import Pages from "../Pages";
import Projects from "../Projects";
import Artboard from "../Artboard";
import Switch from "../Transitions/Switch";
import { getUserId, getClientId } from "../../selectors/user";
import { getSelectedProject } from "../../selectors/projects";
import { getSelectedPages, getPagesWithDetails } from "../../selectors/pages";
import { getPagesDetails } from "../../firebase/pages";
const cachedProject = JSON.parse(getItem("selectedProject"));
const cachedPages = JSON.parse(getItem("selectedPages"));
const Dashboard = () => {
const dispatch = useDispatch();
const userId = useSelector(getUserId);
const clientId = useSelector(getClientId);
const selectedProject = useSelector(getSelectedProject) || cachedProject;
const selectedPages = useSelector(getSelectedPages) || cachedPages;
const pagesWithDetails = useSelector(getPagesWithDetails);
useEffect(() => {
dispatch(
getUserData(userId)
);
cachedProject && selectProject(cachedProject);
cachedPages && selectPages(cachedPages);
}, []);
useEffect(() => {
if (selectedProject && clientId) {
dispatch(
getProjectDetails(
clientId,
selectedProject
)
);
}
}, [selectedProject, clientId]);
useEffect(() => {
if (selectedPages && selectedProject && clientId) {
const pagesWithoutDetails = selectedPages.filter(pageId => (
!Object.keys(pagesWithDetails).includes(pageId)
));
dispatch(
getPagesDetails(
selectedProject,
pagesWithoutDetails
)
);
}
}, [selectedPages, selectedProject, clientId]);
const Content = () => {
if (!clientId) return null;
if (!selectedProject) {
return <Projects key="projects" />;
}
if (!selectedPages) {
return <Pages key="pages" />;
}
return <Artboard key="artboard" />;
};
console.log("Update Dashboard")
return (
<Switch>
{Content()}
</Switch>
);
};
Where I use some functions to fetch data from firebase, some to dispatch actions, and some conditionals.
I'm trying to get deep into testing with Jest and Enzyme. When I was searching for testing approaches, testing useEffect, variables, and conditions, I haven't found anything. All I saw is testing if a text changes, if a button has get clicked, etc. but what about testing components which aren't really changing anything in the DOM, just loading data, and depending on that data, renders a component?
What's the question here? What have you tried? To me it seems pretty straightforward to test:
Use Enzymes mount or shallow to render the component and assign that to a variable and wrap it in a store provider so it has access to a redux store.
Use jest.mock to mock things you don't want to actually want to happen (like the dispatching of actions) or use something like redux-mock-store.
Use that component ".find" to get the actual button you want.
Assert that, given a specific redux state, it renders correctly.
Assert that actions are dispatched with the proper type and payload at the proper times.
You may need to call component.update() to force it to rerender within the enzyme test.
Let me know if you have more specific issues.
Good luck!

ReactJs Redux Data Fetch

I just started to work on React Js and Redux-Thunk. Currently, I am trying to fetch data from a url using redux-thunk. I got data successfully but the issue is that it renders undefined data twice, then it gives me the desired data in props.
Here is my code.
In Actions
index.js
function getData() {
return {
type: 'FETCH'
}
}
function getSuccess(data) {
return {
type: 'FETCH_SUCCESS',
payload: data
}
}
function getFailed(err) {
return {
type: 'FAILED',
payload: err
}
}
export function fetchData() {
const thunk = async function thunk(dispatch) {
try {
dispatch(getData());
const body = await fetch("http://jsonplaceholder.typicode.com/users")
const res = await body.json();
console.log("Thunk", res);
dispatch(getSuccess(res));
}
catch(err) {
dispatch(getFailed(err));
}
}
return thunk;
}
In Reducers fetch.js
const initialState = {
state: []
}
export default function(state=initialState , actions) {
switch(actions.type) {
case 'FETCH':
return {
...state
}
case 'FETCH_SUCCESS':
return {
...state,
data: actions.payload
}
case 'FAILED':
return {
...state
}
default:
return state;
}
}
Reducers Index.js
import fetch from './fetch';
import { combineReducers } from 'redux';
const rootReducer = combineReducers ({
fetch
});
export default rootReducer;
App.js
import React, { Component } from 'react';
import './App.css';
import Main from './component/Main';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);
console.log("STore", store.getState());
class App extends Component {
render() {
return (
<Provider store={store}>
<Main/>
</Provider>
);
}
}
export default App;
Main.jsx
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';
class Main extends Component {
componentWillMount() {
const { fetchData } = this.props
fetchData();
}
render() {
let mydata = this.props.data.data;
console.log("Data .....<>", mydata);
return(
<div>
Main
</div>
);
}
}
const mapStateToProps =(state)=> {
return {
data: state.fetch
}
}
export default connect(mapStateToProps, {fetchData: actions.fetchData})(Main);
Output Screen Shot
Please let me know what i am doing wrong. Any help will be appreciated.
Thanks
This behavior is correct. You're doing everything in the normal way, except calling async operations in componentWillMount method instead of componentDidMount.
Read more here about it.
You need to know, that when you are using componentDidMount - you are handle this in a safe way due to commit phase in component lifecycle and it means that your request will be guaranteed trigger once instead of possible several times, which can be in render phase.
See here the visual diagram to understand this more.
Regarding several renderings - it can be explained easily.
First time, when your component is mounting you are calling asynchronous operation and it needs more time to load data than for component mounting. Thats why you are accessing data property of your initialState (which is empty array), and getting undefined.
When you response is ready and actions is being dispatched, redux trigger re-render of connected components with new state.
If you want to make your async-await syntax works you should make lifecycle with async keyword as well and await your request inside.
NOTE: It's safe, but in several cases it might cause unexpected bugs, so keep in mind. Nevertheless, I don't recommend to use it in a such way. Read about this topic in the another thread at SO.
I advice you to create some isLoading boolean status in your reducer and keep track whether data is loaded or not.
Good luck! Hope it will helps!
There is nothing wrong with your code, but there is one unnecessary action.
Why do you see two times undefined and then you see your data?
First one is coming from the initial render. You are making an async dispatching in your componentWillMount so render does not wait for it, then try to log your data. At that time it is undefined.
Your fetchData dispatches two actions: getData and getSuccess. You see second undefined because of getData action since it returns current state which props.data.data undefined at that time again.
You see the data since getSuccess updates your state now.
If you want to test this comment out getData in your fetchData function, just use getSuccess and change your console.log in the render like that:
mydata && console.log("Data .....<>", mydata);
I think getData action is unnecessary here, it does not do anything beside returning the current state. Also, try to use componentDidMount instead of componentWillMount since it will be deprecated in version 17.

Categories