## 1. Controlled components
The idea of Controlled components is that **we can get the component into any state we want** simply by passing in the right props. So the component isn't keeping track of its own state, and that's a pretty functional concept there. 

## 2. Higher order components
A higher-order component is an example of functional programming because they're functions that return other functions, which is an application of something called **first-class functions**. 


...... more to come

Functional programming is a very broad topic, the basic definition of functional programming is a way of organizing our code base such that we minimize mutation and state change in our applications, we keep our functions independent of external data, this is something called pure functions, and we also treat functions as first-class citizens. Let's have a look at some of the main examples of functional programming in React.

Functional Programming in React

## 1. State Management
A major part of React is state management. But there are 2 types of state management done in frontend UI libraries:

- UI state (ex: toggle light/dark mode)
- Data fetching (Ex: request-response caching, WebSocket event caching)

Data fetching/XHR caching requires caching, invalidation of old data, memoization, garbage collection, etc. which are extremely hard to do manually through a UI state manager. Doing this with UI state managers can often lead to memory leak/high resource usage & other issues.

My picks from each of them are

#### UI state management
[Redux](https://redux.js.org/) \
A predictable State Container for JS Apps? Its the king of state managers. 
The pioneer library to implement the FLUX pattern. But its boilerplate is overwhelming. Even being so great & useful, many people still hate it because of its huge boilerplate. Though `redux-toolkit` tried to mitigate that problem. But once you get off the first phase (boilerplate), I can guarantee you'll never regret that you used Redux.\
Alternatives: [zustand](https://zustand.surge.sh/) and [MobX](https://mobx.js.org/README.html) 

#### Data fetching

- **[react-query](https://react-query.tanstack.com/)**: The missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronising, and updating server state in your React applications a breeze.
- **[swr](https://swr.vercel.app/)**: It's very similar to react-query. SWR provides hooks for data fetching 
 and its lightweight. 
Alternatives: [apollo-client](https://www.apollographql.com/docs/react/) - Best for GraphQL

## 2. Styling
Component styling is a core part of all frontend projects. Styling using JavaScript is a new option (CSS in JS)  but it has an extra runtime cost but its extremely customisable.

Another way to keep the customisability freedom but cut off the runtime cost is to use CSS pre-processors. 
These are highly modular, customisable, offer easy-to-use syntax. And it will finally get compiled to functioning plain CSS.

**My Top picks are**
- **[tailwindcss](https://tailwindcss.com/)** - CSS Based. \
Its a utility first CSS framework. Has its own JIT(Just in time) compiler to cut off unused CSS & push CSS styles on the fly in development. In production, can cut off 100% of unused CSS using `purgecss`. Almost anything that can be done through CSS can be done with tailwindcss classes.

- **[styled-components](https://styled-components.com/)** - CSS in JS based. \
One of the best CSS in JS library. It allows styling using JS's new tag template function syntax. Allows theming, supports style inheritance, editor's CSS IntelliSense support, cross-compatible with other CSS frameworks & allows passing/accessing props through style functions/arguments.

## 3. Forms and validation
Handling Forms can be very challenging in react. Controlling, validating input, reset state on successful submit, checking whether the input was touched (and the list goes on..) are hell lot of work natively. 
But luckily, there are form handling libraries that make it a breeze.

[formik](https://formik.org/) is my pick.

## 4. UI Components
UI components are simply pre-built components that can be configured/tweaked for all our needs. Its one of the core component of every design systems.
It saves a lot of developer time, effort and make the development easier. Also, its managed by so many people that they're often more secure & performant comparing to components built manually.

**Top picks are**
- **[material-ui](https://material-ui.com/):** The most famous UI component library in React ecosystem (Not just in React).
- **[react-bootstrap](https://react-bootstrap.github.io/):** React implementation of famous CSS framework bootstrap

There are so many reactjs based libraries out there and we often find "finding libraries" an overwhelming task. So I am trying to list down all the libs I normally use for these use cases.

Perfect libraries for the perfect use cases

React is awesome & one of the most used JavaScript library according to StackOverflow survey 2024. React is comparatively easy to learn and give us the ability to ship products faster. Here are some of my basic tips and thoughts to improve your developer experience with React.