Azure AD B2C configuration note

 In Azure AD B2C, multiple user flows can be defined for different purposes, for example, signin, signup, or reset password. These user flows can be used by any app registration, so they are global AD B2C configuration, and do not belong to a particular app registration.

In order to test Azure AD B2C with a particular web app, theoretically, there is nothing that need to be changed in application side, an web or SPA app can just hook up with Azure AD B2C without any changes. In the end, after Azure authentication is finished, a bearer token is provided by Azure AD B2C in request header to the web app,  and web app can validate the token to accept or reject the request, but if the web app does nothing, then it should work as usual.

When registering an app to Azure AD B2C, it needs to provide a redirect URL to tell Azure B2C where to redirect the client after Azure B2C authentication. The app registration also generate an application ID (or client id), which the client request must provide when it initializes authentication request, so Azure B2C can validate the request is sent from a registered application.  

When to use useReducer over useState in react

Both useState and useReducer are react hooks to handle state management. The useState is the default choice, and useReducer should only be used when state management logic is complex.

But why useReducer is better than useState when managing complex state in react project?

For useState hook, developers call setState method returned by useState()  to update the state, setState accepts a callback method implemented by app developer, which has a single parameter of the previous state object, developer can return a new updated state based on the current state and application logic.

const [state, setState] = useState({});
setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

Assuming 5 developers work on 5 different modules of the same project, and each developer may call setState to update the shared state object of the project. The problem is some state values set by one developer may break the state set by other developers. As there is not a a center place to manage the state, and each developer can set the state based on his own logic without knowing the effect on other developer's logic.

To solve this problem, the manager of the 5 developers decide to useReducer to solve this issue, 

const [state, dispatch] = useReducer(reducer, initialState)

The manager implements the reducer method as the single method to update the state, so people can audit the state object's update history if inconsistence happens again. Each developer cannot no longer directly update the state object. In stead, if developer need to update the state, he must call the dispatch method with related parameter, the dispatch method will trigger the call of reducer method with the parameter provided by developers. The reducer method will actually update the state and also maintain the consistence of the state object.

So the key difference between useState and useReducer is useReducer provides another layer of separation, and it isolates the role of the state change requester and state change handler. Anyone can send a state change request by calling the dispatch method, but only the state change handler (the implementation of reducer method) can decide how the request is handled so as to be sure the state object is always valid.

Break for javascript debug in chrome when sending xhr/fetch request

It is helpful to check the server request and response in chrome for javascript code, particularly if you do not have the source code information available to set breakpoint in a particular lines.

For chrome, this is easy to do by opening the developer console, and then open source tab, on the right side panel, under the section title of "XHR/fetch Breakpoints", add a new break point item for "Any XHR or fetch". 

The breakpoints requests to input string to break on matched url. In order to break on any xhr or fetch requests, just set the input string as '.', note '*' does not work for matching all purpose.

Closure for javascript

In MDN web doc , A closure in JavaScript is defined as:

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

The definition is not very clear as the closure involves both parent function and inner functions. So it needs more explanation about the definition:

When a (parent) function is executed, the function body will have all the local variables set to some value for the function execution. This execution environment including all the local variables is called parent function's lexical environment. 

If any inner function is defined within the parent function body, then the parent function's lexical environment will provide the variables defined in parent function, but referred by the inner function. Those variables are called closure variables.

The closure is created when the parent function is executed, and for each execution of parent function, a new closure environment is created. This makes sense, as each execution will have different variable values inside the parent function. All the inner functions defined in the parent function body, and whenever they are called, they will share the same lexical environment, i.e. the local variable's latest values declared in the parent function. 

So a closure is created when every time the parent function is executed, it captures all the local variables used by that execution instance. 

Note the closure only keeps the latest values of all the local variables defined in the parent function, so it the parent function does a for loop to update a local variable, then the local variable will have the latest value after the for loop finished. If a inner function is called later, then the inner function can only see the latest value of the parent function's closure variables, certainly the inner function can also update the closure variable to be visible to other inner functions. 

CSS flex usage note

Flex can be used to solve most ui layout requirements in regular business applications if each items need to have equal height. 

Flex consists of flex container and flex items, each of them supports different css styles. It is important to understand which css style works on flex container or flex items.

Flex container:

For any container html element, when setting the below css style to it, the element becomes a flex container, and any direct sub elements become flex items.

.myform {

  display: flex;

}

The flex container has the below css styles:

.myform {

  display: flex;

  flex-wrap: wrap;  //control whether wrap the elements when page shrinks

 justify-content: center; // control where to shall all flex item in flex container in main axis: center, flex-start, flex-end, space-around, space-between

align-items: stretch; // control how each flex item is aligned in cross axis direction: stretch, flex-start, flex-end, center and baseline

align-content: normal: //control how all flex items are align in flex container in cross axis direction, not used very often.

}

Flex elements

Any direct sub elements of flex container element can be styled by flex item css styles. The styles controls the element itself and its sibling elements' behavior. The styles include:

flex: define how the element will grow or shrink when the page width changes. It can be used to define how item grows and shrinks related to other elements. For example, a growing input text box with a button with default width can be defined as below

   input[type="text"] {

      flex: 1 0 auto

  }

  button[type="submit"] {

    flex: initial 0 initial

  }

Sample usage 1

A growing field and a fix width item, the growing field occupies all remaining line

  .search-form {

    display: flex;

    flex-wrap: wrap;

  }

  growingitem {

    flex: 1 0 auto

  }

 fixeditem {

    flex: initial 0 initial

  }

Sample usage 2

Two fields occupy left and right end of the line by setting justify-content: space-between

  .search-form {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

  }

  input[type="search"] {

    flex: 1 0 initial

  }

  button[type="submit"] {

    flex: 1 0 initial

  }

Expanding item to occupy all its container's space 

When setting the below display style to any item within a container, the item becomes a flex container, and by default, flex container will expend and stretch to all available space in container.  

display: flex

Difference between React useCallback and useMemo

React useCallback and useMemo hooks look similar, and both of them take a callback function, and dependent array as parameters. But their returns different values to the callers.

useCallback hook returns a memorized callback function, if the dependencies are changed. So the type of the variable assigned by useCallback is a function object. The function object itself is memorized, so when rendering the parent react function component, the function object will not be created again and again as new function objects. The function object body will not be invoked until in the project someone calls the function.

useMemo hook returns a memorized object, so the type of the variable assigned by useMemo may be any type depends what is returned from the callback method body in useMemo's first parameter. If nothing is returned, then the variable assigned by useMemo hook is undefined. Different from useCallback hook, when assigning a variable by useMemo hook, the callback method of useMemo hook will be called immediately, no matter whether the variable is used or not by the application. 

Since both useMemo and useEffect will automatically execute their callback method when page loads or when dependency parameters change, so their functions look similar. But useMemo is executed during DOM rendering. while use Effect is executed after DOM rendering, for the time consuming operation such as remote network requests. 

In practice, it is important in many times, the cost of using useCallback and useMemo may be bigger than the benefit bringing by it, and requirement of setting the proper dependent array parameter may introduce new bugs to the logic, so they should be used with caution in the real project.

Set dependent array parameter in useCallback (and other react) hooks

React callback hook creates memorized callback function, the memorized callback function gets created once, but will be invoked later for many times. If the callback function uses any values returned by useState() hook, then those values must be included in the useCallback's dependent array parameter. The reason is when useCallback is created, it captures all the closure variables as a snapshot for future usage. After that, if some values are updated by calling set method of useState() hook, the updated values will be not reflected in the closure snapshot captured by useCallback hook when it was created, so when the callback hook method is called after its creating, it will still use the original out-of-date values it captured when it was created. 

So as a simple rule, when defining hooks with dependent parameters, always including all values controlled by useState() in its dependent parameter.