How do React hooks really work?

Tareq

4 min readNov 5, 2020

1. what are closures?

Closures are when the function is able to remember and access the lexical scope even when that function is executing outside its lexical scope

example:

function stopWatch(){

let count=0;

return function(){

count++;

return count;

}

const clock1=stopWatch();

console.log(clock1());

2 . Usage in Function Components

Here, instead of rendering to the DOM, we’ve opted to just console.log out our state. We’re also exposing a programmatic API for our Counter so we can run it in a script instead of attaching an event handler. With this design, we are able to simulate our component rendering and reacting to user actions

2. Stale Closure

If we want to match the real React API, our state has to be a variable instead of a function. If we were to simply expose _var instead of wrapping it in a function, we’d encounter a bug

4.Closure in Modules

We can solve our useState conundrum by… moving our closure inside another closure

3. Accessibility

Why Accessibility?

Web accessibility (also referred to as a11y) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages

2.WCAG

3.WAI-ARIA

Semantic HTML

Semantic HTML is the foundation of accessibility in a web application. Using the various HTML elements to reinforce the meaning of information on our websites will often give us accessibility for free.

4. Mouse and pointer events

Ensure that all functionality exposed through a mouse or pointer event can also be accessed using the keyboard alone. Depending only on the pointer device will lead to many cases where keyboard users cannot use your application.

4. Truthy and Falsy values

positive/negative any number is truthy but 0 falsy
any string truthy but empty string falsy
any variable value undifen that is falsy
any variable value null/NaN that is falsy
any array/object/truthy even empty array/object also truthy
truth itself truthy and false itself falsy

2. null vs undefined

if do not declare variable value it well be undefine

let number;

console.log(number);

output: undefine

3. Double/triple equal

==only check variable does not check the variable type
=== check variable and also variable type

5 .map,filter & find

element
index
array

lets see the example:

const numbers=[1,2,3];

number.map(function(element,index,array)){

console.log(element,index,array);

});

output:

1 0 [1,2,3]

2 1[1,2,3]

3 2[1,2,3]

remember that if we use map output come a array

6. bind, call and apply

The bind method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

const module = {
x: 42,
get: function() {
return this.x;
}
};

const unboundGetX = module.getX;
console.log(unboundGetX());

// The function gets invoked at the global scope
// expected output: undefined

const boundGetX = unboundGetX.bind(module);

In this post, we will be discussing the difference between call() , apply(), and bind() methods of JavaScript functions with simple examples. As functions are also Objects in JavaScript, these 3 methods are used to control the invocation of the function. call() and apply() were introduced in ECMAScript 3 while bind () was added as part of ECMAScript 5.

7.Asynchronous?

Normally, a given program’s code runs straight along, with only one thing happening at once. If a function relies on the result of another function, it has to wait for the other function to finish and return, and until that happens, the entire program is essentially stopped from the perspective of the user.