what’s the goal in breaking things up?
out of box big chunk delivered to browser, 100k is fine; bundle size for whole application; splitting introduces complexity, things we have to debug and maintain.
bundle splitting
- separation of code based on frequency of change
- splits code in multiple pieces, but all have to load before application starts
- advantage grows for static code - that can be cached after the first visit
- most important tool that you can do first
- optimizing code sent
- the advantage grows as amount static code grows
- libraries don’t change
- we can deliver a couple of bites and have them have new application
code splitting
- new and cooler thing
- send the code as the user needs it
- advantages aren’t as clear
- if we have a large application, where the user is unlikely to execute most, this is advantageous
- but if they are going to see the whole application and they need it upfront, it’s not advantageous
- we can defer when user gets the code, if the user doesn’t need it upfront
- depending on the browser and virtual machine the code needs to be scanned and more time doing it for a big chunk code
I can see it applied in my blueshield app, where it has different entry points for patients, admins, and doctors.
synchronous vs single threaded
Single threaded means that only one thing happens at a time.
Synchronous means that if you need to wait for something, then everything stops until the wait is over.
The most common example of synchronous vs asynchronous in JavaScript is making an HTTP request.
If you make a synchronous request, then you send out the HTTP request over the network and then everything stops. Mouse clicks are ignored. Timers that reach zero at put on hold. Nothing happens until the response gets back.
If you want an asynchronous request, then the JS engine carries on with other work. When the request comes back, and the JS engine isn’t busy, then it is picked up and dealt with.
how is outer environment determined?
function b(){
console.log(myVar)
}
function(){
var myVar = 2
b()
}
var myVar = 1
a()- every time you invoke a function it’s put on top of the stack, on top of global execution (at the bottom of the stack)
- every function makes a new execution context
- if b() is on top of a() on the stack, that means a() called b()
- every execution context has it’s own variable environment
- even though b() sits on top of a() in call stack because a called b; if b and a were sitting lexically in the global environment their outer reference will be the global variable environment; it’s sitting in the global execution context variable environment
- when you invoke a function the js engine creates an outer reference for that execution context and it looks for where is the function physically sitting.
- if functions call each other and js engine needs to look into each to get to where the the outer reference is, this look up is called the scope chain
- lexically is where it sits physically
- scope = where a variable is available in your code
*
let vs var
let is block scoped, when you declare a var inside a block, it’s only available inside the block
for(var i = 0; i<5; i++){
console.log(‘i’, i)
}
console.log(‘i’, i)
will print out i=5 at the end, which is the current value of i outside the block
if you do same with let, k outside of the block will give a reference error: k is not defined
asynchronous callback and event queue
js engine is not the only thing running in the browser
- event queue gets processed when execution stack is empty
- the browser asynchronously putting events in the event queue
- but engine is still running line by line
- when the execution context is all gone, then it looks at queue and sees if the event causes a function to be created and executed then it’s put on stack
- so that means long running functions can interrupt events being handled
precedence and associativity
equality and strict equality
operators have precedence, but if they have the same precedence it will go in order of associativity - right to left or left to right
Associativity means the direction (right to left or left to right) in which entire expression is evaluated.
js is synchronous so it will decide which function goes first
operations are functions
3+4*4, precedence is given to *
let a = 2, b = 3, c=4 a=b=c all will equal to 4, because equal sign has right to left associativity
1+ ‘2’ will coerce to string ‘12’
because js is a dynamically typed language, no reason, just a choice
console.log(3<2<1) is true
left to right associativity
so false < 1 is true
- Number(undefined) is NaN
- Number(null) is 0
- == coerces the type (to number?)
false == 0 true
null == 0 false
null < 1 true
“” == false true
“” == flase true
for equality false will coerce to 0, but null won’t - null doesn’t coerce to 0 for comparison, but it does for less than
- causes problems because “”== false is true for example
- == has unexpected behavior
- === strict equality doesn’t try to coerce the value
- if 2 values are not the same type it says not equal and returns false
“3”===3 is false
“3”===”3” is true
3===3 is true
dynamic typing vs static typing
First, dynamically-typed languages perform type checking at runtime, while statically typed languages perform type checking at compile time. This means that scripts written in dynamically-typed languages (like js) can compile even if they contain errors that will prevent the script from running properly (if at all). If a script written in a statically-typed language (such as Java) contains errors, it will fail to compile until the errors have been fixed.
keyboard avoiding view
- keyboard avoiding view inside scrollview
behavior = {position}
keyboardVerticalOffset={30}
for in and for of
how to get index in array (2 ways)
for (const property in object) {
console.log(`${property}: ${object[property]}`);
}
const array1 = ['a', 'b', 'c'];
for (const element of array1) {
console.log(element);
}
for…in iterates over property names, not values, and does so in an unspecified order (yes, even after ES6).
to get value:
for(var key in objects) {
var value = objects[key];
}
how to get index in array
myArray.forEach(function (value, i) {
console.log(‘%d: %s’, i, value);
});
for (let [index, val] of array.entries()) {
// your code goes here
}React.memo vs React.PureComponent
useCallback
useMemo
React. memo is a higher order component. If your component renders the same result given the same props, you can wrap it in a call to React. memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.
(https://www.youtube.com/watch?v=J9u_k1dxyJk)
By default the child will rerender whenever parent is rerendered, but if you add memo it’ll only rerender if the props have changed.
If you are familiar with React.PureComponent then React.memo is quite straightforward as it is exactly similar to React.PureComponent. We use React.PureComponent with class component while React.memo works with functional components 👌
By default, React.memo will compare all props passed to the component by referential equality.
useMemo returns a memoized value
useCallback returns a memoized callback
you can use React’s useMemo Hook to memoize a functions return value(s) and to run a function only if its dependencies (here search) have changed:
const filteredUsers = React.useMemo(
() =>
users.filter((user) => {
console.log('Filter function is running ...');
return user.name.toLowerCase().includes(search.toLowerCase());
}),
[search]
);export function Movie({ title, releaseDate }) {
return (
<div>
<div>Movie title: {title}</div>
<div>Release date: {releaseDate}</div>
</div>
);
}export const MemoizedMovie = React.memo(Movie);
https: //dev.to/dinhhuyams/introduction-to-react-memo-usememo-and-usecallback-5ei3
4: 50 https://www.youtube.com/watch?v=-Ls48dd-vJE
https: //flaviocopes.com/react-hook-usecallback/
useRef() vs ref
createRef()
Refs let you access and interact with DOM nodes created in the render() method. They make it possible to do the more traditional DOM manipulation, and they’re commonly used to access form elements and get their values.
for example if you want to move your curser from one field to another without keyboard, but with enter. You create a reference to the DOM element in one input and onKeyUp you focus on the next DOM element by ref.
https://www.youtube.com/watch?v=tiytyGEodl0
It is the functional component alternative to createRef() that is used in React’s class (stateful) components.
https: //levelup.gitconnected.com/understanding-useref-513b1bbe00dc
https: //www.udemy.com/course/react-the-complete-guide-incl-redux/learn/lecture/15700362#questions
loading wheel and error messages, state update batching
set loading to true before fetching, in .then set it to false, in catch set error to true to display error messages
react batches state changes in the function that runs synchronously, we will only have one render cycle per function even if we set multiple states
https://www.udemy.com/course/react-the-complete-guide-incl-redux/learn/lecture/15700374#questions
reference error vs a type error
A ReferenceError occurs when you try to use a variable that doesn’t exist at all.
ReferenceError: “x” is not defined
A TypeError occurs when the variable exists, but the operation you’re trying to perform is not appropriate for the type of value it contains. In the case where the detailed message says “is not defined”, this can occur if you have a variable whose value is the special undefined value, and you try to access a property of it.
ex. TypeError: “x” is not a function
if you have a function expression and console log var it’s give you undefined, if you try to run it, it’ll give you a type error. The var exists, as it is hoisted, but it doesn’t know if it’s a function yet.
