wip: add lazy, conditional questions

src/data/question-groups/react/content/inline-conditionals.md

@@ -0,0 +1,11 @@
+Inline conditionals in React are expressions that can be used to conditionally render elements. They are useful when you want to render different elements based on a condition. They can be used in JSX by wrapping them in curly braces. Some examples of inline conditionals include the `ternary operator`, logical `&&` operator, and the logical `||` operator.
+
+```js
+<div>{condition ? <span>True</span> : <span>False</span>}</div>
+```
+
+```js
+<div>{condition && <span>True</span>}</div>
+```
+
+> Note that you can also use the `if` statement, but it cannot be used inside JSX. It can only be used inside a function body.

src/data/question-groups/react/content/lazy-loading.md

@@ -0,0 +1,7 @@
+You can use React's `React.lazy()` function in conjunction with dynamic `import()` to lazily load a component. This is often combined with `Suspense` to display fallback content while the component is being loaded.
+
+```js
+const MyComponent = React.lazy(() => import('./MyComponent'));
+```
+
+> Using this pattern requires that the component being lazy loaded is exported as a default export.

src/data/question-groups/react/react.md

@@ -210,4 +210,31 @@ questions:
     topics:
       - 'Core'
       - 'Intermediate'
+  - question: What are Server Components in React?
+    answer: |
+      Server Components in React 18 are a new type of component that allows developers to write components that render on the server instead of the client. Unlike traditional components, Server Components do not have a client-side runtime, meaning they result in a smaller bundle size and faster loads. They can seamlessly integrate with client components and can fetch data directly from the backend without the need for an API layer. This enables developers to build rich, interactive apps with less client-side code, improving performance and developer experience.
+    topics:
+      - 'Core'
+      - 'Intermediate'
+  - question: What is `React.lazy` loading in React?
+    answer: Lazy loading is a technique in React that allows you to load components only when they are needed, reducing the initial bundle size and improving performance.
+    topics:
+      - 'Core'
+      - 'Intermediate'
+  - question: How do you implement `React.lazy`` loading for a component in React?
+    answer: lazy-loading.md
+    topics:
+      - 'Core'
+      - 'Intermediate'
+  - question: What is `Suspense` in React?
+    answer: |
+      Suspense is a component in React that lets you specify the fallback content to display while waiting for a component to load. It is used in conjunction with `React.lazy()` to lazily load components.
+    topics:
+      - 'Core'
+      - 'Intermediate'
+  - question: What are inline conditional expressions in React?
+    answer: inline-conditionals.md
+    topics:
+      - 'Core'
+      - 'Beginner'
 ---