How react hooks work?

React Hooks are introduced in version 16.8 released in February 2019. Hooks are API’s or in-built functions introduced to use state and other features in React without writing a class. If you want to get started with React or React Hooks, here is official React documentation. In official documentation it only explains usage for react hooks, so we will learn about the working of hooks.

Basic React Hooks

10 in-built hooks were shipped with React 16.8 but the basic (commonly used) hooks include:

Basic Hooks

• useState
• useEffect
• useContext

Additional Hooks

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

Now let us understand how hooks work under the hood with the help of an example.

const Counter = () => {
  const [counter, setCounter] = useState(0);
  onClick = () => setCounter(prev => prev + 1);
  return (
    <button onClick={onClick}>Click me</button>
    <p>{[counter}}</p>
  )
}

We have created a function with the name “Counter” which returns the button and counter value in view.

const [counter, setCounter] = useState();

2. Why Accessibility?

What accessibility is?

By “digital accessibility”, we mean web sites and applications that are able to be used and accessed by individuals regardless of their physical, auditory, motor, or cognitive abilities or disabilities. Making Yale’s digital content accessible aligns with Yale’s mission to disseminate knowledge and to promote diversity and inclusion throughout our community.

While accessibility is necessary for some groups to use the web, it is beneficial for nearly everyone. Accessibility promotes usability generally: everyone benefits from clear instructions, opportunities to correct form errors, simple visual layouts, high color contrast, and the option to read a transcript or captions to a video or audio recording.

Finally, web sites and applications that are coded for accessibility are more compliant with web technical standards, meaning they are more likely to work across platforms and continue to work across future devices as technologies change. Many developers find that coding for accessibility speeds up development time and reduces bugs of all kinds once software has been launched.

3. Truthy and Falsy value

As well as a type, each value also has an inherent boolean value, generally known as either truthy or falsy. Some of the rules are a little bizarre so understanding the concepts and effect on comparison helps when debugging JavaScript applications.

The following values are always falsy:

• false
• 0 (zero)
• '' or "" (empty string)
• null
• undefined
• NaN

Everything else is truthy. That includes:

• '0' (a string containing a single zero)
• 'false' (a string containing the text “false”)
• [] (an empty array)
• {} (an empty object)
• function(){} (an “empty” function)

A single value can therefore be used within conditions, e.g.

if (value) {
  // value is truthy
}
else {
  // value is falsy
  // it could be false, 0, '', null, undefined or NaN
}

4. JavaScript (and by extension TypeScript) has two bottom types : null and undefined. They are intended to mean different things:

JavaScript (and by extension TypeScript) has two bottom types : null and undefined. They are intended to mean different things:

• Something hasn’t been initialized : undefined.
• Something is currently unavailable: null.

for exampale:

// Both null and undefined are only `==` to themselves and each other:
console.log(null == null); // true (of course)
console.log(undefined == undefined); // true (of course)
console.log(null == undefined); // true
// You don't have to worry about falsy values making through this check
console.log(0 == undefined); // false
console.log('' == undefined); // false
console.log(false == undefined); // false

5. Find the largest element of an array

The max() method returns the number with the highest value.

console.log(Math.max(10, 320, 222));
// expected output: 320
console.log(Math.max(-1, -3, -2));
// expected output: -1
const nums  = [1, 3, 2];
console.log(Math.max(...nums));
// expected output: 3