| /* | |
| ** Return the indices of the elements that produce a given target sum | |
| ** Example: twoSum([1, 5, 9, 2], 11) -> [2, 3] | |
| */ | |
| /* #1 O(n2): just check every item against with every other */ | |
| var twoSum = function (nums, target) { | |
| let arr = []; | |
| for(let i = 0; i < nums.length; i++) { | |
| for(let j = i + 1; j < nums.length; j++) { |
| /* | |
| ** 1. Providing a fallback component is mandatory so React knows what to display while it waits (<Suspense fallback={} />). | |
| ** | |
| ** 2. Suspense component will catch suspension from child components (similarly to how ErrorBoundary works), so we move the | |
| ** fetching logic inside the child component. | |
| ** -> See one of my StackOverflow answers about ErrorBoundaryfrom 2018: https://stackoverflow.com/a/48948731/4303574. | |
| ** | |
| ** 3. Fetching on useEffect would start fetching on component mount, which beats the purpose of parallelization in this case, | |
| ** so we also remove useEffect, and use something similar to `usePreloadedQuery` in Relay. | |
| ** (ps: it would be possible to make our own custom solution. It needs to throw a promise/error or return the final result |
The query below is the one I use to retrieve all topics with the top level names (e.g: Economics), for the Flashcards main page (Known/Unknown/Starred modals):
query FLASHCARDS_QUESTION_TOPICS($enrollmentDetailId: Int!) {
person {
learner {
flashcards(enrollmentDetailId: $enrollmentDetailId) {
nodes {
nodeId
title
| <html> | |
| <head></head> | |
| <body> | |
| <!-- | |
| use of const | |
| use of DOMContentLoaded event | |
| use of forEach | |
| better readability | |
| styling achieved with class rules | |
| use of template literals (supported by most modern browsers). |
| <Composer list={[ | |
| <Query rersource="get/session" />, | |
| <Query resource="get/account" />, | |
| <Query resource="get/portfolios" />, | |
| ]}> | |
| {({ session, account, portfolioos }) => { | |
| if(session) { | |
| initUserData({ account, portfolios }) | |
| } | |
| }} |
| // instead of this | |
| const showUserStats = (user) => { | |
| if(user.age >= 18 || user.parentsAllowed) { | |
| // do something | |
| } | |
| }; | |
| // consider this | |
| const isUserAllowed = user => user.age >= 18 || user.parentsAllowed | |
| const showUserStats = (user) => { |
Resources:
"Learn once, write everywhere" - use the same code base to run on the Web, IOS and Android. When you learn React's principles like composition, you can use to apply it anywhere.
When we use setState, React merge the new state into the already existing one, kicking off a process called Reconciliation. Reconciliation is about updating the UI to reflect the state changes in the most efficient way possible. To do this, React will construct a new tree of React elements, and "diff" against the previous element tree in order to figure out how the UI should change in response to the new state.
By doing this, and knowing exactly what changes occurred, it wil lbe able to minimize its footprint on the UI by only making updates where absolutely necessary.
| /** ACTIONS & ACTION CREATORS **/ | |
| const LOAD_PROFILE = 'LOAD_PROFILE'; | |
| const loadProfileAction = { | |
| type: LOAD_PROFILE | |
| }; | |
| const loadProfile = user => ({ | |
| type: LOAD_PROFILE, | |
| user |