Quiz

• Are you familiar with the rules of hooks in React?
  你熟悉React中的hook规则吗？

• How would one optimise the performance of React contexts to reduce rerenders?
  如何优化 React 上下文的性能以减少重新渲染？

• How do you ensure that a component can be unit tested?
  如何确保组件可以进行单元测试？

• what benefits do functional components provide vs class components?
  与类组件相比，功能组件有什么好处？

• what are the use cases for using useCallback, useMemo and useEffect?
  使用 useCallback、useMemo 和 useEffect 的用例有哪些？

• How would you reference and interact with a DOM element in React without the use of document functions such as getElementById or querySelector?
  在不使用 getElementById 或 querySelector 等文档函数的情况下，如何在 React 中引用 DOM 元素并与之交互？

• Explain and tell me the difference between render props, higher order components, prop getters. What problem are they trying to solve?
  解释并告诉我渲染道具、高阶组件、道具获取器之间的区别。他们试图解决什么问题？

• React 18 introduced some changes to strict mode when in development mode, what are they and what is their purpose?
  React 18 在开发模式下对严格模式进行了一些更改，它们是什么以及它们的目的是什么？

• how would you set the state in a callback based on the current value of that state, without adding it to a dependency array?
  如何根据该状态的当前值在回调中设置状态，而不将其添加到依赖项数组中？

• How would you ensure that separate state changes are triggered in a synchronous manner?
  您如何确保以同步方式触发单独的状态更改？

• when testing a component, what knowledge should the component have or not have? How do you ensure it's a unit test and not an integration test?
  在测试一个组件时，该组件应该具备哪些知识或不具备哪些知识？如何确保它是单元测试而不是集成测试？

• What do you think about test coverage as a metric for test quality?
  您如何看待测试覆盖率作为测试质量的指标？

• How would you split a component to encapsulate business logic and presentation concerns? How would the tests for these look like?
  您将如何拆分组件来封装业务逻辑和表示问题？这些测试会是什么样子？

• Why is lifting state up a bad practice?
  为什么提升状态是一种不好的做法？

• What can you tell me about composability vs inheritance in React?
  关于 React 中的可组合性与继承性，您能告诉我什么吗？

• If you had a Web application written in an old frontend framework for example, what strategy would you take to migrating that application to React?
  例如，如果您有一个用旧前端框架编写的 Web 应用程序，您会采取什么策略将该应用程序迁移到 React？

• what is the difference between a primitive and non-primitive value in JavaScript, and how would you handle extra rerender caused by having non-primative values in a dependency array in the various hooks React has to offer?
  JavaScript 中的原始值和非原始值之间有什么区别，以及如何处理由于 React 提供的各种钩子中的依赖数组中包含非原始值而导致的额外重新渲染？

• what is the difference between useEffect and useLayoutEffect?
  useEffect 和 useLayoutEffect 有什么区别？

- what reserved prop in React allows you to trigger a rerender in that component?

• what is a closure?
  什么是闭包？

• what is shallow/deep copy?
  什么是浅拷贝/深拷贝？

• what is hoisting? how does it work for functions and for variables?
  什么是吊装？它如何适用于函数和变量？

• what is a pure function?
  什么是纯函数？

• how does reconciliation work?
  和解如何进行？

• what is lazy loading? when should you use it?
  什么是延迟加载？你什么时候应该使用它？

• sever side rendering / isr / ssg
  服务器端渲染/isr/ssg

• what is the difference between types and interfaces in typescript?
  Typescript 中的类型和接口有什么区别？

• when should you use a context to manage state instead of redux/local state
  什么时候应该使用上下文来管理状态而不是 redux/local 状态

• higher order components  高阶分量

• webpack / tree shaking
  webpack / 树摇动

- concurrency / event loop / callback queue

• How do you deal with conflicts?
  你如何处理冲突？

• What role(s) do you take in a team?
  您在团队中担任什么角色？

• Strengths/weaknesses (in some form)
  优点/缺点（以某种形式）

• Tell me about a stressful situation you experienced, what did you learn from it?
  告诉我你经历过的一次有压力的情况，你从中学到了什么？

React questions (junior to senior):
反应问题（初级到高级）：

• Describe how to use useState.
  描述如何使用 useState 。

• What happens with a component when it receives new props?
  当组件收到新的 props 时会发生什么？

• How can you share a state between multiple components?
  如何在多个组件之间共享状态？

• Do you have to use React with JSX?
  你必须将 React 与 JSX 一起使用吗？

• What is the difference between a controlled and uncontrolled component/input/element/form?
  受控和不受控组件/输入/元素/表单之间有什么区别？

• What is the VDOM (Virtual DOM)?
  什么是VDOM（虚拟DOM）？

• What are some common pitfalls when doing data fetching?
  获取数据时有哪些常见陷阱？

• Describe the usage and pitfalls of useEffect (open discussion).
  描述 useEffect 的用法和陷阱（公开讨论）。

JS Questions (junior to senior):
JS 问题（初级到高级）：

• What is the difference between let and const?
  let 和 const 之间有什么区别？

• What is a callback, when would you use one?
  什么是回调，什么时候会使用回调？

• What is the difference between == and ===?
  == 和 === 之间有什么区别？

• What is hoisting?  什么是吊装？

• What is a closure?
  什么是闭包？

• What is the event loop?
  什么是事件循环？

• When is it a good idea to use a class (open discussion).
  什么时候使用课程是个好主意（公开讨论）。

---

• Micro Frontends;  微前端；

• Client side caching;  客户端缓存；

• Client side persistence;
  客户端持久化；

• Real time comms: Websockets, Grpc;
  实时通信：Websockets、Grpc；

• Common Frontend patterns: pooling, delay, throttle, etc;
  常见的前端模式：池化、延迟、节流等；

• Immutability/fp;  不变性/fp；

• Async and off main thread patterns;
  异步和关闭主线程模式；

• Focus on main js concepts not frameworks: general state mgm, observables, ui patterns that apply to many fw;
  关注主要的 js 概念而不是框架：一般状态 mgm、可观察量、适用于许多固件的 ui 模式；

- Debugging;  调试;

Can you explain a novice the difference between state and props? 你能为新手解释一下状态和道具之间的区别吗？

When will you use state, context, and external state manager? 什么时候会使用状态、上下文和外部状态管理器？

How do you decide when to split a component into subcomponents? 您如何决定何时将组件拆分为子组件？

How do you handle API and what techniques you'll use when you've call APIs upfront vs when it's called based on user action? 您如何处理 API，以及当您预先调用 API 时与基于用户操作调用 API 时您将使用哪些技术？

What goes in hooks for you? (Intentional open ended question) 什么对你来说很有吸引力？ （故意提出开放式问题）

Why props is needed to be immutable? 为什么 props 需要不可变？

What is the difference between controlled and uncontrolled component? 受控组件和非受控组件有什么区别？

How can you implement Error Boundary in function component?

---

It really depends on the company but i would assume you will be tested on the foundations: What is the difference between a Class Component vs a Function Component, What are Hooks and why would you use Hooks as opposed to a function, What is useReducer, useContext, etc... What is global state and local state, and what is state management.,

---

• What front-end framework do you know? Do you have a favorite and why?
  你了解哪些前端框架？你有最喜欢的吗？为什么？

• Can you explain to me the difference between React class components and function component? Which one would you use and why?
  你能给我解释一下 React 类组件和函数组件之间的区别吗？您会使用哪一个？为什么？

• Can you name me some hooks and explain what they do? What does useEffect do? What does useMemo do?
  你能给我列出一些钩子并解释一下它们的作用吗？ useEffect 有什么作用？ useMemo 有什么作用？

• What are some libraries that you typically use in your React applications?
  您通常在 React 应用程序中使用哪些库？

• How do you make a network request in React?
  如何在 React 中发出网络请求？

• What build tools to you use to build your application? Have you tried Vite, Next, etc.
  您使用什么构建工具来构建应用程序？你尝试过Vite、Next等吗？

• Do you know what CSS-in-JS is? Can you explain the advantages and drawbacks of this approach?
  你知道 CSS-in-JS 是什么吗？您能解释一下这种方法的优点和缺点吗？

• How would you test a front-end application?
  您将如何测试前端应用程序？

• How do you make a website accessible?
  如何使网站易于访问？

• Let's say you inherit a front-end project, and the app feels very sluggish to use. What would you look for to optimize the app?
  假设你继承了一个前端项目，并且该应用程序使用起来感觉非常缓慢。您会寻找什么来优化应用程序？

• Do you use TypeScript? What's your opinion on TypeScript? What's the any type?