why console.log inside the useEffect runs twice

Question

i'm currently working with react project, which gets data from api and show it on the console.

although i wrote the console.log() just one time inside the useEffect hooks (with the [articles] dependency ), the web browser's console.log always shows the console.log two times like this: enter image description here

but i don't know reason why..

in my thought when the 'articles' state set by first useEffect hook, the second useEffect hook activates and console.log should be run only one time.. but it didn't.

here is my code

const NewsList = () => {

  const [articles, setArticles] = useState([]);

  useEffect(()=> {
    const getData = async () => {
      const response = await axios.get(`https://newsapi.org/v2/top-headlines?country=kr&apiKey=''
      `);
      setArticles(response.data.articles); 
    }
    getData();
  },[])

  useEffect(()=> {
    console.log(articles);
  },[articles])
  
  
  return (
    <div className="newsListBlock">
      <NewsArticle article={article}></NewsArticle>
      <NewsArticle article={article}></NewsArticle>
      <NewsArticle article={article}></NewsArticle>
      <NewsArticle article={article}></NewsArticle>
      <NewsArticle article={article}></NewsArticle>

    </div>
  );
};

https://stackoverflow.com/a/72370066/10535718 does this answer your question? — Drashti Kheni, Aug 31 '22 at 06:54

AKX · Accepted Answer · 2022-08-31T06:53:45.187

4

The effect is run every time the dependencies change.

The first value, on the first update of the component, is [] (the initial state).
The second value, after the data-getting effect runs, is whatever you get from newsapi.org.

Additionally, if you're using <StrictMode> and a React development build, certain lifecycles can be invoked twice. See e.g. this codesandbox; if you remove the <StrictMode> from index.js, you'll see less console.logs.

edited Aug 31 '22 at 06:53

answered Aug 31 '22 at 06:50

AKX

152,115
15
115
172

I was thinking the same, however, his screenshot shows that the variable has values both times, so the first value, given your theory, should be empty, no? – Casper Bang Aug 31 '22 at 06:51
1

@CasperBang See my edit; this is StrictMode playing tricks on us. OP is just not showing the first empty console.log. – AKX Aug 31 '22 at 06:55
@CasperBang browser console output shows only current state if the logged value was an object. i.e. if you log object, then change it, browser will show this changes. – Jaood_xD Aug 31 '22 at 07:38
@Jaood_xD That wouldn't happen with React state, since you need to always reassign them in order for a component to rerender. – AKX Aug 31 '22 at 07:38
as AKX said i just captured the part of console.log. and after i removed the '', the console properly showed the state only one time. this was the problem with the strickmode. thanks a lot :) – Stab-the-cake Aug 31 '22 at 08:07
@Stab-the-cake You should keep strict mode on, though – it's there to keep you from making mistakes. – AKX Aug 31 '22 at 08:12

score 0 · Answer 2 · answered Aug 31 '22 at 06:52

From the official react doc:

By using this Hook, you tell React that your component needs to do something after render.

So this useEffect will run once on the first render of the component, and then run a second time due to the use the setArticles function which update articles.

why console.log inside the useEffect runs twice

2 Answers2