Q1. What is the difference between function declaration and function expression? Q2. What does destructuring an object mean? How does it work when passing an object as a function argument? And how can you destructure an object nested in another object? Q3. What is object literal enhancement? Q4. What can you use the spread operator for? BONUS 1: Why can you omit "return" in arrow functions? BONUS 2: How regular function declarations and arrow functions treat the scope (this) differently?
Q1. What is the difference between promises and async/await? Q2. Why do we need to include the word “default” when exporting JS modules? Q3. How does a module with a single and multiple exports differ when being imported in another module? Q4. What two possible locally scoped changes using the term “as” when importing a module are presented in this chapter? Q5. How is using modules different in ES6 vs CommonJS?BONUS (Interview Questions)
Topics: What it means to be Functional, Imperative vs Declarative, Functional Concepts - Immutability, Pure Functions, Data Transformations.
Q1. What is a higher-order function? Q2. What is a recursive function? In what scenarios can recursive functions be a better solution than loops? Q3. What is function chaining? Q4. What is function composition? BONUS: What are the pros and cons of functional programming vs object-oriented programming? (Not clear in the chapter).
Q1. Why do we need to import React and ReactDOM libraries instead of importing just React? Q2. What does AJAX stand for and how did it change the way pages were loaded in the browser? Q3. What are class components? What are the lifecycle methods of class components? Q4. What is JSX? Interview Question: How React works? How Virtual-DOM works in React?
Using the cdns* and the script type=“text/babel”, recreate the Delicious Recipes code using another fake - or real - dataset (array) and share your code with the group. i.e. School Names, Addresses and Programs; Cars names, prices and available colours; etc.
We’ll notice that the process of looping through data - or consuming data from an API - and rendering UI is basically the same despite of the industry of the app (Food, Cars, Educational, Hotels, BnB, Movies, etc).
Q1. What tools do you use for code compilation? I.E. Webpack, parcel, babel. Q2. Aside from code compilation, what else can webpack - or other bundlers - handle? Q3. What benefits do we developers gain by using a tool like webpack? Q4. What is the benefit of splitting code in multiple files or modules? Q5. What is the benefit of adding “source-map” to the webpack configuration?
Q1. What are React Hooks? Q2. What is the useState hook used for and how does it work? And how does useState make it easier to manage state in functional components compared to class components? Q3. Why is it not a best practice to store state in components? Q4. What is a pure component? Q5. How can we pass data up the component tree?
Q1. What is a ref? Q2. Why is using controlled components a better approach compared to using refs when building forms? Q3. What’s the benefit of using React Context instead of passing data down the component tree using props? Q4. Why is it a best practice to add functions to context for the operations that can change the state? Q5. Why it may be better to use custom hooks instead of exposing context to consumer components?
Q1. What is useEffect used for? Q2. When should we add a dependency array as a parameter to some hooks? What happens when you add an empty array as dependency to useEffect? Q3. What happens when you return a function from useEffect? Q4. What does the hook useMemo do? Q5. What is the difference between useEffect and useLayoutEffect? And in which cases would useLayoutEffect be recommended?
Q1. What rules should we follow when using hooks? Q2. What is a reducer? Q3. How can you guarantee you keep the original object in the state and just overwrite the intended key/value of the object when setting the state? Q4. What does the memo function do? How does the memo function help to improve the app performance? Q5. How can useCallback or useMemo help to improve the app performance?
Q1. What are some use cases for storing data in sessionStorage or localStorage? Q2. What are Render Props? Q3. What does windowing (or virtualization) mean? What solutions are available in React for virtualized lists? Q4. Why did the authors decide to use useCallback and useMemo for the values of item, prev and next in the useIterator custom hook?
Q1. What is the difference between waterfall and parallel requests? Q2. Why is it recommended to slow down your network speed when developing an application? Q3. How can you prevent a component from being rendered until the data it requires is provided? Q4. What are your thoughts on GraphQL?
Q1. What are error boundaries and why they are important? Q2. Why should you split your App code in smaller chunks? Q3. What does the Suspense component do? How is it used to handle lazy loading components?
Q1. What is linting? What does ESLint do? Q2. What are some examples of ESlint plugins and how do they help us improve the code quality? Q3. What is Prettier? Why should you use a code formatter? Q4. How do ESLint and Prettier work together? Q5. Do you use typechecking in React? How do you currently handle it?
Q1. What steps should you follow in order to practice TDD? Q2. What are the jest methods .toBe(), .toEqual(), and .describe() used for? Q3. What is the purpose of jsdom in testing React components with jest? Q4. What it can be a good idea to add a data-testid attribute to the html elements you want to test? Q5. What is code coverage and Istanbul? How much coverage is considered good for unit tests in a project?
Q1. What is routing? Q2. How can you nest routes using React Router? Q3. What do the hooks useRoutes, useParams and useNavigate do?
Q1. What is the difference between isomorphism and universalism? Q2. What are the differences between Client Side Rendering, Server Side Rendering, Rehydration and Prerendering? Q3. When should you use CRA, Gatsby or Next.js? Q4. Any final thoughts?