What are third party libs used in react.js 2024!

In React.js, third-party libraries can greatly enhance your application’s functionality by providing additional tools, components, utilities, and features. Here are some of the most commonly used third-party libraries in React.js, categorized by their purpose:

1. State Management Libraries

• Redux: A popular state management library that helps manage the global state in your React application.
  • Redux Official Site
• MobX: A simpler and more reactive state management alternative to Redux.
  • MobX Official Site
• Recoil: A state management library specifically designed for React with fine-grained control over state management.
  • Recoil Official Site

Redux Example:

First, install Redux with React bindings:

#bash
npm install redux react-redux

Then create a simple counter example:

#react #javascript
// store.js
import { createStore } from 'redux';

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

export const store = createStore(counterReducer);

#react #javascript
// App.js
import React from 'react';
import { Provider, useDispatch, useSelector } from 'react-redux';
import { store } from './store';

function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
    </div>
  );
}

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

MobX Example:

Install MobX:

#bash
npm install mobx mobx-react

#javascript
// store.js
import { makeAutoObservable } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count += 1;
  }
}

export const counterStore = new CounterStore();

#javascript
// App.js
import React from 'react';
import { observer } from 'mobx-react';
import { counterStore } from './store';

const Counter = observer(() => {
  return (
    <div>
      <p>Count: {counterStore.count}</p>
      <button onClick={() => counterStore.increment()}>Increment</button>
    </div>
  );
});

function App() {
  return <Counter />;
}

export default App;

Using Coding Filters to Streamline Your Development Process!

Incorporating coding filters into your development workflow can streamline processes and reduce redundancy. By filtering out irrelevant data or actions, developers can concentrate on the essential parts of their code, leading to more efficient and less error-prone applications.