From e2e15abb04348d08eccab6bb3d95ade11dd38bff Mon Sep 17 00:00:00 2001 From: tahachm <97478750+tahachm@users.noreply.github.com> Date: Sun, 27 Apr 2025 16:09:54 +0500 Subject: [PATCH] fix: c28aa26a-7e76-424b-a611-5add64af7759 --- .../contents/user-interface-questions-cheatsheet/en-US.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/en-US.mdx b/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/en-US.mdx index 9714cb1f0..8c93ce341 100644 --- a/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/en-US.mdx +++ b/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/en-US.mdx @@ -34,7 +34,7 @@ Most UI questions in interviews will require state and designing the state well - **Determine the minimum state needed in your UI**: The smaller the state, the easier it is to read and understand the code -> lower likelihood for bugs. Identify essential state vs derived state. Derived state is state that can be calculated from essential state. By deriving the state on-the-fly you reduce the possibility of state values going out-of-sync. - **Separate rendering code vs data management code**: Make the UI a function of your data and separate your code into two parts (rendering code vs data management code) for better readability. If you use JavaScript frameworks such as React, you will more or less be forced to do so. -- **Use the state-reducer pattern for complex state interactions**: If the question requires many state fields and certain actions require changing multiple fields at once, use a [reducer to consolidate state update logic](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer). First popularized by Redux, the state-reducer pattern encourages you to determine the state of your UI, actions that can be taken, and how to combine actions with state to derive the next state. If you are using React, you can achieve this pattern via the [`useReducer` React hook](https://reactjs.org/docs/hooks-reference.html#usereducer). Redux is usually overkill for interviews and `useReducer` should be sufficient. +- **Use the state-reducer pattern for complex state interactions**: If the question requires many state fields and certain actions require changing multiple fields at once, use a [reducer to consolidate state update logic](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer). First popularized by Redux, the state-reducer pattern encourages you to determine the state of your UI, actions that can be taken, and how to combine actions with state to derive the next state. If you are using React, you can achieve this pattern via the [`useReducer` React hook](https://react.dev/reference/react/useReducer). Redux is usually overkill for interviews and `useReducer` should be sufficient. [React's](https://beta.reactjs.org) docs on ["Managing State"](https://beta.reactjs.org/learn/managing-state) is an excellent resource on how to design and use component state correctly. Some of the ideas mentioned aren't specific to React and can be applied to any UI frameworks.