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

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(() => {

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

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

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

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


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. 😊

Create a useMousePosition Hook with useEffect and useState in , It will listen add a window listener for `mousemove` and update state with each movement. Create a useMousePosition Hook with useEffect and useState in React You'll notice we didn't apply a function to our addEventListener . useState much like it's counterpart setState returns an asynchronous function to set the state. So logging dreams just below the setDreams call isn't going to give you any results. Instead you can log inside outside the useEffect to see the state.

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]);

Using window.addEventListener with react hooks, Using classes, and not react hooks, using addEventListener would have looked something like this: Here you would add the event listener in by calling window​. You would have needed to create a function that will then handle the event import React, { useState } from 'react'; export default function  React Hooks are a great way to reuse logic throughout your project. The most popular and commonly used hooks are useState and useEffect. useState. useEffect(() => {window.addEventListener

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

Resize event listener using React hooks - DEV, window.addEventListener('resize', function() { // your custom logic }); import { useState, useEffect } from 'react'; const getWidth = () => window. width from the state object setWidth(getWidth()) }; // set resize listener window. If you find yourself adding a lot of event listeners using useEffect you might consider moving that logic to a custom hook. In the recipe below we create a useEventListener hook that handles checking if addEventListener is supported, adding the event listener, and removal on cleanup.

useEventListener React Hook, Hooks are a new addition in React that lets you use state and other React If you find yourself adding a lot of event listeners using useEffect you might checking if addEventListener is supported, adding the event listener, and useEventListener(eventName, handler, element = window){ // Create a ref  Even though the props get updated, the useState didn’t reset the state. How to sync props to state in React Hooks This is perfect use case for useEffect. Whenever props change, we will set the state inside useEffect. Lets change the example and see,

Custom React hook for listening to scroll events · GitHub, import { useState, useEffect } from 'react' export const useScroll = () => { // Set a single addEventListener('scroll', listener) // cleanup function occurs on unmount useEffect(() => { const debounceWrapper = debounce(listener, 300) window. import React, {useState } from 'react'; function Example {// Declare a new state variable, which we'll call "count" const [count, setCount] = useState (0); We declare a state variable called count , and set it to 0 .

Examples from "Making Sense of React Hooks" · GitHub, <p>Window width is {width}</p>. ); const [width, setWidth] = useState(window. addEventListener("resize", handleResize); useEffect(()  useState and useEffect are some of the React built-in Hooks. useState works in a way that it returns two values: one is the state value, and the other one is its setter. By array destructuring, you can set the name of those two values to anything you like. <variable_name> and set<variable_name> is the common naming. As an argument, you pass in

  • The answer here may help you…
  • How do you know your event listener gets triggered ever? I'd suggest add more logging, including event listener entry point.
  • 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.
  • 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, thanks, I changed it.