Faqs

const Dashboard : React . FC = () => { const store = createStore ( countReducer ) const divRef = useRef < HTMLDivElement >( null ); store . subscribe (() => { const state = store . getState () if ( divRef . current ) divRef . current . innerText = `this is cool, another listener: ${ state . count } ` ; }) return ( ... < button onClick = { () => store . dispatch ({ type : ActionType . INCREMENT }) } > add </ button > < button onClick = { () => store . dispatch ({ type : ActionType . DECREMENT }) } > minus </ button > < div ref = { divRef } > 0 </ div > ... ) } Re-Render: const count = useRef ( 0 ) ; useEffect ( ( ) => { count . current = count . current + 1 ; } ) ; return ( < > < input type = " text " value = { inputValue } onChange = { ( e ) => setInputValue ( e . target . value ) } /&g

  Why You Need an API Layer  https://semaphoreci.com/blog/api-layer-react 3. Easily handle request cancellation Thanks to the centralized nature of the API layer, you can effortlessly add custom features like cancellation to all API request definitions. Your frontend application performs API calls asynchronously. This means that when calling the same API twice in a short amount of time, the response to the first request may arrive after the response to the second one. Because of this, your application may render inconsistent data. A popular approach to deal with this problem is the debounce technique. The idea behind debounce is to wait a certain amount of time before executing the same operation twice. Implementing this and finding the right debounce time value for each scenario, however, is not easy. For this reason, you should consider API request cancellation. With request cancellation, the new API request simply cancels the previous one of the same type. API request cancellation i

 Set:  The set object lets you store unique values of any type const arr1 = [ 1 , 2 , 3 , 1 , 2 , 'name' ] const set1 = new Set(arr1) const arr2 = Array.from(set1) console.log(arr2) // [ 1, 2, 3, 'name' ] add object or array to Set, can't use "has" or "delete" set1.add([ 1 ]) console.log(set1.has([ 1 ])) // false set1.delete([ 1 ]) // false convert to Array const arr2 = Array.from(set1) const arr3 = [...set1] Set for string, remove duplicated letters const text = 'IndiaIndia' ; const mySet = new Set(text); console.log( [...mySet], text.split( '' )) [ 'I', 'n', 'd', 'i', 'a' ] [ 'I', 'n', 'd', 'i', 'a', 'I', 'n', 'd', 'i', 'a' ] Esencia Realty

old way: function accumulate ( arr ) { let result = [] let sum = 1 0 for ( let i = 0 ; i < arr . length ; i ++) { sum += arr [ i ] result . push ( sum ) } return result } in functional programming no mutation - don't mutate data pure function - no side effects const  so we need to use filter, map, concat, reduce,  closure:  a closure is a function that references variables in the outer scope from its inner scope. function accumulate ( arr ) { let total = 10 return (() => arr . map (( num ) => { total += num return total }) ) } console . log ( sum ([ 1 , 2 , 3 ])()) => [ 11, 13, 16 ]

Asymptotic notations are classified into three types: Worst case time complexity : It is a function defined as a result of a maximum number of steps taken on any instance of size n. It is usually expressed in  Big O notation . Average case time complexity : It is a function defined as a result of the average number of steps taken on any instance of size n. It is usually expressed in  Big theta notation . Best case time complexity : It is a function defined as a result of the minimum number of steps taken on any instance of size n. It is usually expressed in  Big omega notation . Space complexity : It is a function defined as a result of additional memory space needed to carry out the algorithm. It is usually expressed in  Big O notation . Big-Oh (O) notation Big Omega ( Ω ) notation Big Theta ( Θ ) notation Default sort() in JavaScript uses  insertion sort  by  V8 Engine of Chrome  and  Merge sort  by  Mozilla Firefox  and  Safari .   Heap Sort is regarded as an efficient algorithm, wi

 causes: 1.    state/props change 2. context change -  parent render In normal rendering, React does not care whether “props changed” - it will render child components unconditionally just because the parent rendered! If you wrap a component in  memo , it won’t re-render when its parent renders. Should I memo everything? If  memo  has such a great effect on performance, does it make sense to wrap everything with it? Well, not really.