React

p:: Front-end development

• React
• The library for web and native user interfaces
• One of the core innovations of React was that they made the View a function of your application’s State. Often represented as v = f(s).
• React is declarative
  • Imperative programming is how you do something, and declarative programming is more like what you do.
  • IMPERATIVE - C, C++, Java
  • DECLARATIVE - HTML, SQL
  • ~BOTH - JavaScript, C#, Python
• By embracing both JSX and React’s component based API, all of a sudden what used to require imperative, operational like code, could be abstracted behind a declarative API. This not only enabled a better developer experience, but also a vibrant ecosystem of third party components.
• Pure Functions
  • No Side Effects
  • Consistent Outputs

”Hooks are functions, but it’s helpful to think of them as unconditional declarations about your component’s needs. You use React features at the top of your component similar to how you import modules at the top of your file.” - React docs

• Rules
  • When a component renders, it should do so without running into any side effects
  • If a side effect is triggered by an event, put that side effect in an event handler
  • If a side effect is synchronizing your component with some external system, put that side effect inside useEffect
  • If a side effect is synchronizing your component with some outside system and that side effect needs to run before the browser paints the screen, put that side effect inside useLayoutEffect
  • If a side effect is subscribing to an external store, use the useSyncExternalStore hook
• <StrictMode> – React