Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useEffect hook with empty dependency array called twice #111

Open
paaatrick opened this issue Aug 13, 2020 · 2 comments
Open

useEffect hook with empty dependency array called twice #111

paaatrick opened this issue Aug 13, 2020 · 2 comments
Labels

Comments

@paaatrick
Copy link

First, wonderful library; thanks for your work on it.

If I have a component with a useEffect hook with an empty dependency array I would expect the callback function to be called once. However if the callback function calls a state updating function (i.e. one returned by useState or the dispatch function returned by useReducer) the callback is called twice. Here is an example:

import React, { useEffect, useState } from 'react';
import blessed from 'blessed';
import { render } from 'react-blessed';

const Test = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(count => count + 1);
  }, []);
  return <element>{count}</element>;
};

const screen = blessed.screen({
  autoPadding: true,
  smartCSR: true,
  title: 'test'
});

screen.key(['escape', 'q', 'C-c'], () => {
  return process.exit(0);
});

render(
  <Test />,
  screen
);

I would expect the Test component to render 1, but instead it renders 2. The equivalent example using the react-dom renderer results in 1 being displayed (https://codesandbox.io/s/brave-grass-wik3s?file=/src/App.js).

This is the simplest example I could make to reproduce the problem. The context for this is I wanted to use useEffect to have a component make an HTTP request once on mount and store the results in state, but I kept seeing two HTTP requests being made.

@Yomguithereal
Copy link
Owner

Hello @paaatrick. Sorry for the late response but I did not find much time to investigate this issue. Would you be willing to try and peak under the hood to find what could cause this?

@viktor-podzigun
Copy link

FYI: useLayoutEffect works just fine, so for time being I use it instead of useEffect. Could be some issue related to scheduling.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants