The other day I was reading up on the legendary React God Dan Ambrov’s great but very un-TLDR . post on useEffect Sometimes I find myself faking it til I make it, which is fine but then it can come back later and bite me in the ass! The transition to Hooks has been quite a confusing one actually, as most people assumed (including myself) that the changes were just about the syntax. In fact, the changes are more substantial and it involves rethinking ifecycles and how we restructure the components. This [in progress…] shows us the kind of rethinking that are needed… post A UseEffect Counter Refactor The post talks about how this is not correct, the count will always be zero. Counter = { [count, setCount] = useState( );

  useEffect( { id = setInterval( {
      setCount(count + );
    }, ); clearInterval(id); }, []); ;
} const => () const 0 => () const => () 1 1000 return => () // Cleanup on 'unmounting' return {count} < > h1 </ > h1 However putting a watcher on the count state will allow the effect to update correctly. useEffect( { id = setInterval( {
    setCount(count + );  }, ); clearInterval(id);
}, [count]); => () const => () 1 1000 return => () This is pretty much going to be the most common way that most of us will conclude with. But Dan Ambrov says that we can level up with another way which would remove the watcher completely! useEffect( { id = setInterval( {
      setCount( c + );    }, ); clearInterval(id);
  }, []); => () const => () => c 1 1000 return => () Amazing! However, if your like me and have been too lazy to fully understand React’s hooks array destructuring then your probably asking… Where on earth does that "c" come from? A ‘New’ Trending JS Pattern Maybe not so new, but new to a lot of us and hooks has popularized it to new levels! [state, setState] = useState(init); const is a function that returns an array of functions… useState For example we could mock it up like this; useState = { [state(initialState), setState(initialState)]
} state = { } setState = { } const ( ) => initialState return const ( ) => parameter return `this is the state function with the parameter - ` ${parameter} const ( ) => parameter return `this is the setState function with the parameter - ` ${parameter} Invoking use would get us; State useState( )
( ) [ , ]
useState( )[ ] useState( )[ ] useState( )[ ] 99 2 "this is the state with the parameter - 99" "this is the setState with the function parameter - 99" 99 0 "this is the state with the parameter - 99" 99 1 "this is the setState with the parameter - 99" 99 2 undefined // Element doesn't exist Destructuring allows us to rename the returned elements as what they are name to represent themselves [state, setState] = useState( ) state = useState( )[ ] setState = useState( )[ ] const 99 // Equivalent to... const 99 0 const 99 1 But in this instance we get an error; Uncaught SyntaxError: Identifier ‘state’ has already been declared This is because we already have used the name in our function expression inside state useState. Actually we can use any name we want (that isn’t already used) to represent the first two elements of the returned array from ; useState [whatIsTheState, changeUpDatState] = useState( )
whatIsTheState changeUpDatState const 99 "this is the state with the param - 99" "this is the setState with the param - 99" Thanks to Ken C Dodds on his on helping me understand this. post Rosetta Stone That Counter Aight, lets go back to that counter; Counter = { [count, setCount] = useState( );
  useEffect( { id = setInterval( {
        setCount( c + );    
      }, ); clearInterval(id);
    }, []); ;
} const => () const 0 => () const => () => c 1 1000 return => () return {count} < > h1 </ > h1 is the parameter of setCount, which is the initialState of useState, which is 0 for the first time round. c One is added to and then is returned as the param for setCount, which sets the new count. This happens every second. c This means that useEffect is run once on load, and there is no need to keep calling useEffect on each change, as it is all happening once. Custom Hooks Potential The power of this pattern is that it has ton of potential when you start using custom hooks. Features can be abstracted out of the components and have only the relevant data returned within those arrays to be used. [name, age, error] = useCustomerDataAPI(key) const Here this made up custom hook can be setup like this. The hook needs an api key as a parameter and then will return 3 functions which returns a name string, a number age and a boolean error. These three functions are able to be used in our component, most likely using error to check if it is false and then rendering the name and age to the page. I wont go into details of the custom hook itself, will probably require another post. For now, I’m really enjoying the direction that React is going… Til next time folks, happy coding!

Keep

Winner of Noonies 2020 for the award Hacker Noon Contributor of the Year - APPS.

2020 - Hacker Noon Contributor of the Year in APPS

<Lets code! />

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Hooked on React's Array Destructuring Pattern

Too Long; Didn't Read

Company Mentioned

Puyan Wei

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Hooked on React's Array Destructuring Pattern

Too Long; Didn't Read

Company Mentioned

Puyan Wei

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES