how to set react useState in useEffect and in window.addEventListener

Question

I have 2 state variables, at the page load the program checks to see if there is an available agent and if yes, setDefault state variable is set to true, and then if a language change event is fired and there's an available agent the setStudio is set true, however when the conditional rendering is done default is always true, even though I set it to false in the eventListener fires, can anyone see what I'm doing wrong.

any help would be appreciated.

 const Home = ({ t, i18n, history }) => {
     const [defaultStudio, setDefaultStudio] = useState(false);
     const [studio, setStudio] = useState(false);

     useEffect(() => {

       checkForAvailableAgent(LINK_TO_AGENT)
        .then(res => {
          setDefaultStudio(res);
        })
        .catch(error => {
          console.log("an error happened.");
        });

        window.addEventListener("langChange", () => {
          if(i18n.language === "en") { 
            checkForAvailableAgent(LINK_TO_AGENT)
             .then(res => {
               setStudio(res);
               setDefaultStudio(false);
            })
          .catch(error => {
             console.log("an error happened.");
          });
        } else {
          setStudio(false);
          setDefaultStudio(false);
        }
      });

     },[defaultStudio, studio, i18n.language]);



    return (
      defaultStudio ? 
       (<Button>Call live</Button>)
       : 
       (<Button>Call</Button>)

     )
    }

The answer here may help you https://stackoverflow.com/questions/55565444/how-to-register-event-with-useeffect-hooks — SuleymanSah, Oct 17 '19 at 08:59
How do you know your event listener gets triggered ever? I'd suggest add more logging, including event listener entry point. — Vlad Glazov, Oct 17 '19 at 09:01
Your code looks syntactically incorrect. Were is your close `}` & `)` missing for your addEventListener, are you not getting errors in your console. Your indentation is wrong too, correct that it would be more obvious. — Keith, Oct 17 '19 at 09:02
`return ({ defaultStudio ?` That looks incorrect too, again are you not getting any errors, putting `{` after a `(` is telling the JS engine to start an object literal.. Just do `return defaultStudio ?` instead.. — Keith, Oct 17 '19 at 09:22

score 1 · Answer 1 · answered Oct 17 '19 at 09:03

1

Default is a protected keyword in javascript.

var default = 1;
SyntaxError: missing variable name

It is used to identify a default export module. export default myComponent; Renaming your variable should solve this issue.

answered Oct 17 '19 at 09:03

sebastienbarbier

6,542
3
29
55

mojtaba ramezani · Answer 2 · 2019-10-17T09:07:34.313

0

You must be use removeEventListener

try this:

const handleUserlangChange = useCallback(event => {
    // do somethings
}, []);

useEffect(() => {
    window.addEventListener('langChange', handleUserlangChange);
    return () => {
      window.removeEventListener('langChange', handleUserlangChange);
    };

},[default, studio, i18n.language]);

edited Oct 17 '19 at 09:07

answered Oct 17 '19 at 09:01

mojtaba ramezani

1,461
16
15

score 0 · Answer 3 · answered Oct 17 '19 at 09:37

0

I just fixed it, just for future reference, I had to take out [default, studio, i18n.language] from the useEffect.

answered Oct 17 '19 at 09:37

akano1

40,596
19
54
67

how to set react useState in useEffect and in window.addEventListener

3 Answers3