useEffect is not getting called in react js

Question

I am new to react js. Here, I have following components where it is not getting called.

    export const BG: React.FunctionComponent<Icard> = ({
      const state = useLocalStore(() => ({
        id = url
        setId(url) {
          state.id = url
        }
      }))

      const changeImage = () =? {

      }

      React.useEffect(() => {
        state.setId(id)
      }, [id])

      const bgWrapper = (
        <div
          className={classNames({
            [css.ImageContainer]: true,
            [css.defaultImage]: !state.imageURI
          })}>
          {isUploadMode ? (
            <upload
              imageUrl={state.imageURI}
              changeImage={changeImage}
          ) : (
            <BImage
              image={defaulImage}
            />
          )}
        </div>
      )

      return useObserver(() => (
        <div className={css.BgCard}>
          {isUploadMode ? (
            bgWrapper
          ) : (
            <p>Hello</p>
          )}
        </div>
      ))
    })

Now here useEffect is not getting called . Now if I use this without creating a jsx vaiable. and use that div directly then it works. Can any one help me why the useEffect is not getting called .

Effects are guaranteed to be called at least once when the component mounts. Are you saying it isn't being called at all, ever? or it isn't triggering as expected? Can you clean up your code formatting? It's extremely unreadable. — Drew Reese
– Drew Reese, Commented Apr 17, 2020 at 6:14
What do you expect to happen? What is id? You aren't defining it anywhere. — JMadelaine
– JMadelaine, Commented Apr 17, 2020 at 6:47
He is using Mobx's hook, useLocalStore which creates id in state. I think OP should not touch Mobx until he is more comfortable with the basic react hooks. See suggestion. — Ben Butterworth
– Ben Butterworth, Commented Apr 17, 2020 at 7:07

rtviii · Accepted Answer · 2020-04-17 06:08:58Z

1

You need to remove id from the dependencies array at the end of useEffect. The purpose of that array is to list all the variable that when changed would trigger the effect that you define.

If you have the id there -- you are in a catch 22 and can't change it unless it's changed.

    React.useEffect(() => {
            state.setId(id)
          }, [])

answered Apr 17, 2020 at 6:08

rtviii

91513 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Drew Reese Over a year ago

If an empty dependency array is used then the effect is only triggered once when the component mounts.

rtviii Over a year ago

isn't that what he wants? @DrewReese

Drew Reese Over a year ago

OP says it isn't getting called at all. Effects are guaranteed to be called at least once. Question is a bit unclear.

rtviii Over a year ago

It is. There are almost certainly better ways of updating id -- wherver it's defined --- but the way his hook is defined right now suggests some confusion about the array in the first place, I thought.

ganesh kaspate Over a year ago

No, It should be changed when id changes

Lekoaf · Accepted Answer · 2020-04-17 06:59:23Z

0

Because you have a bug in your code?

const changeImage = () =? {

  }

answered Apr 17, 2020 at 6:59

Lekoaf

1,0479 silver badges11 bronze badges

Comments

Ben Butterworth · Accepted Answer · 2020-04-17 07:07:08Z

0

What is the point of setting the ID state with the ID state? You should state.setId() in response to an action (button being pressed), not a state change.

My previous answer: The 2nd argument [id] to useEffect is an array of state values that cause it to run the callback (first argument).

  React.useEffect(() => {
    state.setId(id)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id])

Note: It would have been automatically added by ESLint, so what I do is add // eslint-disable-next-line react-hooks/exhaustive-deps as shown above.

According to this SO question/ answer, you might be using it in an unidiomatic way.

edited Apr 17, 2020 at 7:07

answered Apr 17, 2020 at 6:59

Ben Butterworth

30.1k12 gold badges165 silver badges229 bronze badges

Collectives™ on Stack Overflow

useEffect is not getting called in react js

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related