react useState not re rendering

Question

I have a pretty simple useEffect hook

const [tagsWithData, setTagsWithData] = useState([]);
useEffect(() => {
    ....
    const finalsTags = temp.map((item) => item.name);
    setTagsWithData(finalsTags);
 }, []);

Inside of return, I have condition to render the input tag

{tagsWithData.length !== 0 ? (
    <TagsInput
        selectedTags={selectedTags}
        tags={tagsWithData}
     />
      ) : (
      <TagsInput
     selectedTags={selectedTags}
     tags={tags}
     />
 )}

The above code always stays on 0 and it does not move to the else condition.

What am I making wrong here.

Thank you

Rohan Büchner · Accepted Answer · 2022-03-13T06:38:33.523

2

Your useEffect is not being told to update. useEffect needs to be passed the value/dependencies that it needs to (trigger the) update on. Without it, the effect will only run once on (initial) component render

const [tagsWithData, setTagsWithData] = useState([]);
useEffect(() => {
    ....
    const finalsTags = temp.map((item) => item.name);
    setTagsWithData(finalsTags);
 }, [temp]);  // <--- add this

Below is a small example illustrating the differences. Click on the button, and check out the output of both effectWithDep and effectWithoutDep. You'll notice only effectWithDep will update.

// Get a hook function
const { useState, useEffect } = React;

const Example = ({title}) => {
  const [count, setCount] = useState(0);
  
  const [effectWithDep, setEffectWithDep] = useState(0); 
  const [effectWithoutDep, setEffectWithoutDep] = useState(0);
  
  useEffect(() => {
     setEffectWithDep(count)
  }, [count])
  
  useEffect(() => {
     setEffectWithoutDep(count)
  }, [])

  return (
    <div>
      <p>{title}</p>
      
      <p>effectWithDep: {effectWithDep}</p>
      
      <p>effectWithoutDep: {effectWithoutDep}</p>
      
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example title="Example using Hooks:" />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

edited Mar 13 '22 at 06:38

answered Nov 26 '21 at 07:09

Rohan Büchner

5,333
4
62
106

i am getting finalsTags' is not defined no-undef – Deepa Nov 26 '21 at 07:47
@DeepakMurthyyour I see you edited your sample. So this does change the context. You cannot declare the finals data inside the hook, and pass it was a `dependency`. In your updated sample `temp ` would be the `dependency`. I'll update my answer to reflect this – Rohan Büchner Nov 26 '21 at 07:57
i am getting temp' is not defined no-undef – Deepa Nov 26 '21 at 08:54
@DeepakMurthy please create a JSfiddle of the whole sample, then I can have a look at it. But the issue as per your original question was to do with the `useEffect` deps. I'd love to help more, but within the context of this specific question, it's getting off topic. (Unless you can provide a close to working sample) – Rohan Büchner Nov 26 '21 at 08:56
https://codesandbox.io/s/beautiful-lichterman-gxdmu i have created an sandbox – Deepa Nov 26 '21 at 09:45
@DeepakMurthy your sample seems fine. I tested it with another mock API, and the `useEffect` hook works. I feel there might be some some general other code / logic issues + I'm struggling to follow the exact flow of what you're expecting in your code. However. There are no issues to do with the original question, and I'd suggest you either need a new question once you know exactly what you're needing to figure out. (This question is getting a bit out of hand/off topic :P) – Rohan Büchner Nov 26 '21 at 11:47
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/239606/discussion-between-rohan-buchner-and-deepak-murthy). – Rohan Büchner Nov 26 '21 at 12:11

react useState not re rendering

1 Answers1