You can prevent the React JSX component reload issue on state changes by rendering the React JSX component as children of Tab component. In the below example, we have prevented the re-rending of textbox component on state changes in Tab component.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('container'));
import { useState } from 'react';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { TabComponent } from '@syncfusion/ej2-react-navigations';
function App() {
const [name, setName] = useState('');
return (<div>
<div className="control_wrapper" id="control_wrapper">
<TabComponent>
<div className="e-tab-header">
<div> TextBox </div>
</div>
<div className="e-content">
<div>
<TextBoxComponent placeholder="Enter Name" value={name} input={(e) => setName(e.value)}></TextBoxComponent>
<div>My name is {name}</div>
</div>
</div>
</TabComponent>
</div>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Functional Component</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='container' style="margin: 20px auto 0; width:450px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#loader {
color: #008cff;
font-family: 'Helvetica Neue', 'calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('container'));
import { useState } from 'react';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { TabComponent } from '@syncfusion/ej2-react-navigations';
function App() {
const [name, setName] = useState('');
return (
<div>
<div className="control_wrapper" id="control_wrapper">
<TabComponent>
<div className="e-tab-header">
<div> TextBox </div>
</div>
<div className="e-content">
<div>
<TextBoxComponent placeholder="Enter Name" value={name} input={(e) => setName(e.value)} ></TextBoxComponent>
<div>My name is {name}</div>
</div>
</div>
</TabComponent>
</div>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);