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, Apr 17 '20 at 06:14
What do you expect to happen? What is `id`? You aren't defining it anywhere. — JMadelaine, Apr 17 '20 at 06: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](https://reactjs.org/docs/faq-state.html#should-i-use-a-state-management-library-like-redux-or-mobx). — Ben Butterworth, Apr 17 '20 at 07:07
It doesn't appear as though `id` is in scope, but I'm surprised you are not seeing errors about it, so perhaps it is. Have you tried `state.id` *as* the dependency? What is updating `id` (or `state`) to *possibly* cause a rerender? — Drew Reese, Apr 17 '20 at 15:46

score 1 · Answer 1 · answered Apr 17 '20 at 06:08

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 '20 at 06:08

rtviii

807
8
19

1

If an empty dependency array is used then the effect is only triggered once when the component mounts. – Drew Reese Apr 17 '20 at 06:10
isn't that what he wants? @DrewReese – rtviii Apr 17 '20 at 06:11
OP says it isn't getting called at all. Effects are guaranteed to be called at least once. Question is a bit unclear. – Drew Reese Apr 17 '20 at 06:12
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. – rtviii Apr 17 '20 at 06:14
No, It should be changed when id changes – ganesh kaspate Apr 17 '20 at 06:53

score 0 · Answer 2 · answered Apr 17 '20 at 06:59

0

Because you have a bug in your code?

const changeImage = () =? {

  }

answered Apr 17 '20 at 06:59

Lekoaf

897
7
11

Ben Butterworth · Answer 3 · 2020-04-17T07:07:08.380

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.

useEffect is not getting called in react js

3 Answers3