# Introducing: ReactiveSearch v4
With a lot of feedback-oriented development, ReactiveSearch v4 is in preview now. We have added components to enable richer search experiences, improved on performance, and also improved on the bundle size off the library.
You can download it for your search project with the following command:
> *npm install @appbaseio/reactivesearch@*latest
In this blog post, I will share a summary of the key enhancements and changes included in the v4 release.
* **Support for React 18 😎**
ReactiveSearch and ReactiveMaps are fully compatible with `React 18.x` and above with the `4.x` releases.
* **Removal of search engine DSL from the library**
To prevent a DoS scenario and as a security best practice, we're removing frontend DSL generation. ReactiveSearch library will instead use [Reactivesearch API](https://docs.reactivesearch.io/docs/reactivesearch/v3/advanced/migration-v4/docs/search/reactivesearch-api/) to declare the search intent. This will require the use of a ReactiveSearch API server and you can choose one of the two path ways to do this:
* As a ReactiveSearch (previously appbase.io) customer, you already have the ReactiveSearch API server hosted in the cloud. There are no usage changes as compared to ReactiveSearch v3's usage in this scenario.
* As an open-source user, you have the choice to run ReactiveSearch API server as an open-source docker container. The API server should be configured to point to a search engine: Elasticsearch, OpenSearch and Solr are currently supported.
* **Removal of** `DataSearch` **&** `CategorySearch` **components**
Besides `SearchBox` component, `v3.x` exported two components for auto-suggestions: `DataSearch` & `CategorySearch`. `4.x` removes these additional components, as the [SearchBox](https://docs.reactivesearch.io/docs/reactivesearch/v3/advanced/migration-v4/docs/reactivesearch/v3/search/searchbox/) component is versatile and allows creating a search UI with many possible options.
* **Richer Analytics**
With `v4.x`, we are enabling a richer analytics experience for our users, thanks to the use of [analytics.js](https://github.com/appbaseio/analytics.js) by ReactiveSearch. Users can save searches, mark searches as favorites, tag custom events, in addition to recording search and clicks. [Check out the docs to learn more](https://docs.reactivesearch.io/docs/reactivesearch/react/advanced/analytics/)
* **New components**
* [**TreeList**](https://docs.reactivesearch.io/docs/reactivesearch/react/list/treelist/)
![TreeList image](https://i.imgur.com/AwUfFJ7.png align="left")
`TreeList` creates a selection-based hierarchical tree UI component that is connected to your search index's **category > sub-category > sub-sub-category** type of hierarchical fields. It supports both single and multiple item selections.
* [**Chart Components**](https://docs.reactivesearch.io/docs/reactivesearch/react/chart/piechart/)
![Image to be displayed](https://i.imgur.com/4TxrKmi.png align="center")
* ReactiveSearch now has chart components to build reporting UIs with advanced search capabilities, or to integrate a reporting view into your search UI.
* [**Pie Chart** ↗️](https://docs.reactivesearch.io/docs/reactivesearch/react/chart/piechart/)
* [**Bar Chart** ↗️](https://docs.reactivesearch.io/docs/reactivesearch/react/chart/barchart/)
* [**Histogram Chart** ↗️](https://docs.reactivesearch.io/docs/reactivesearch/react/chart/histogramchart/)
* [**Line Chart** ↗️](https://docs.reactivesearch.io/docs/reactivesearch/react/chart/linechart/)
* [**Scatter Chart** ↗️](https://docs.reactivesearch.io/docs/reactivesearch/react/chart/scatterchart/)
* [**Reactive Chart** ↗️](https://docs.reactivesearch.io/docs/reactivesearch/react/chart/reactivechart/)
*Got a custom chart to render?* `ReactiveChart` is a generic component to render any chart UI supported by the Apache [E-charts](https://echarts.apache.org/) library. Additionally, it supports pre-built charts (`pie`, `bar`, `line`, `histogram` and `scatter`) to cover the most common chart use cases that can be configured using declarative props.
* **Removal of Deprecated props**
We have also removed the following deprecated props and instead recommend using their alternatives
| **Prop Name** | **Component** | **Alternative** |
| --- | --- | --- |
| `analyticsConfig` | `ReactiveBase` | `reactivesearchAPIConfig` |
| `appbaseConfig` | `ReactiveBase` | `reactivesearchAPIConfig` |
| `analytics` | `ReactiveBase` | `reactivesearchAPIConfig.recordAnalytics` |
| `enableAppbase` | `ReactiveBase` | `-` |
| `triggerAnalytics` | `ReactiveList.renderItem` | `triggerClickAnalytics` |
| `aggregationField` | `All Components` | `distinctField` |
* **Simplified SSR API**
With the release of v4, the SSR implementation is more robust and easier, requiring very little config from users. 😌
![A comparison of SSR config required for v3 as compared to v4](https://cdn.hashnode.com/res/hashnode/image/upload/v1676274560036/07ab3b44-8d78-4ff0-9ec3-fa935a0b8e5b.png align="left")
Here's a SSR usage example with the new API:
```javascript
import React, { Component } from 'react';
import {
// ... other components
getServerState // the method to calculate initial state
} from '@appbaseio/reactivesearch';
const components = {
// component props-settings
};
export default class Main extends Component {
static async getInitialProps({ pathname, query }) {
return {
// 1st Argument
// pass the reference to the app, i.e. Main in this case
// The new method saves you from explicitly specifying the
// component type, props, and source
// 2nd Argument
// The queryString or the query object to consider
// URLParams while computing the initialState at server side
store: await getServerState(Main, query);
};
}
// In ReactiveBase (refer below)
// the contextCollector is another prop required for RS SSR
// to do some magic internally
// you should pass it without worrying about its source
// we handle it for you
render() {
return (
<>
{/* ... other components ...*/}
);
}
}
```
The new usage mechanism takes care of a lot of configuration from the user on its own now, significantly reducing human error while writing the config.
See the new SSR usage in action with the CodeSandbox below:
> 💫 Additionally, you can read the [docs here](https://docs.reactivesearch.io/docs/reactivesearch/react/advanced/ssr/) to know more about how ReactiveSearch provides SSR support out of the box.
## Summary
We went over React v18 support, introduction of new components for TreeList and Charts, richer analytics support, low-config SSR usage support, and removal of frontend DSL generation from the library.
Take ReactiveSearch v4 for a spin and let us know your feedback on the [GitHub issues](https://github.com/appbaseio/reactivesearch/issues).
You can follow the [quickstart guide over here](https://docs.reactivesearch.io/docs/reactivesearch/react/overview/quickstart/) to build a search UI with ReactiveSearch v4.