# Tests: Middle UI ReactNative developer for GoodDollar

1. What’s wrong with the logging in the following component ? How to make it correct and optimized according to the React Hooks’ rules ?

const App = () => {
 const [clicksCount, setClicksCount] = useState(0)
 // some handlers could modify clicksCount
 // 
 
 console.log(clicksCount)
 
 return (
   // some JSX which calls handlers on certain interactions
 );
}

2. What’s wrong with the following optimization attempt ? How the logic is broken and why ? How to optimize this component correctly ? Does it require optimization at all ?

const App = () => {
 const [clicksCount, setClicksCount] = useState(0)
 // added: 
 const increaseClicksCount = useCallback(() => setClicksCount(clicksCount + 1), [])
 
 return (
   <button
     // before: onClick={() => setClicksCount(clicksCount + 1)}
     onClick={increaseClicksCount}
   >
 );
}

3. What are 2 things missing in useEffect to make code more robust, correct, performant ?

const App = () => {
 const [appState, setAppState] = useState('active')
 
 useEffect(() => {
   const onFocus = () => setAppState('active')
   const onBlur = () => setAppState('inactive')
 
   window.addEventListener('focus', onFocus)
   window.addEventListener('blur', onBlur)
 })
 
 return (
   <p>
     App state: <code>{appState}</code>.
   </p>
 );
}

4. Fix the code from the previous test to be fully compatible with _React Native_ keeping existing logic

5. Adjust the following hook which initializes some API. Pre-conditions are:

- the initializeAPI function should be called strictly once.
- onInitialized callback function may be changed during initialization
- after initialization only the latest (value of) onInitialized callback passed should be invoked
- we’re assuming the initialization never fails, so don’t need to add error handling

const useMyAPI = onInitialized => {
 useEffect(() => {
   initializeAPI().then(onInitialized)
 }, [])
}

6. Optimize the following list’s render. Which are the (at least) 2 things missing in the current implementation and how do they affect the rendering process ? Flow typing added just to describe `items` format, you're free to use plain JS in the solution.

// @flow

type Item {
  id: string,
  title: string,
}

type AppProps {
  items: $ReadOnlyArray<Item>,
}
 
const App = (props: AppProps) => {
 const renderItem = (item: Item, index: number) => (
   <li key={index} onClick={() => console.log(item)}>
     {item.title}
   </li>
 )
 
 return (
   <ul>
     {props.items.map(renderItem)}
   </ul>
 );
}

7. The following hook was designed to debounce value changes. It should change output value each time the source value stops changing (with an ms time gap, e.g. if no changes during this amount of milliseconds - it returns the latest value). What’s wrong with its implementation ? Which issues we could have with it and why ? Rewrite this hook and provide the working solution which doesn’t violate the hooks rules.

import { useEffect, useState } from 'react';
import { debounce } from 'lodash'
 
const useDebouncedValue = (value, ms = 100) => {
 const [debounced, setDebounced] = useState(value)
 
 useEffect(debounce(() => {
   setDebounced(value)
 }, ms), [ms, setDebounced, value])
 
 return debounced
}