We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Modern React - Hooks/Suspense

We plan on writing a modern React application and would like to leverage Syncfusion Web.
By modern I specifically refer to React Hooks -https://reactjs.org/docs/hooks-intro.html - and React Suspense -https://reactjs.org/docs/react-api.html#reactsuspense.
I understand that Syncfusion may not have support for it today yet, but will it architecturally be able to support it?

6 Replies

JD Jayakumar Duraisamy Syncfusion Team January 22, 2019 01:07 PM UTC

Hi Ralf, 
Greetings from Syncfusion. 
Query 1: React Hooks 
We are analyzing the [“React Hooks”] requirement, we will update you the further details in two business days. 
Query 2: React Suspense  
Yes, our EJ2 component support for React Suspense architecture. 
Please let us know if you need further assistance on this.  
Jayakumar D 

JD Jayakumar Duraisamy Syncfusion Team January 24, 2019 11:09 AM UTC

Hi Ralf, 

Please find the response for Query 1. 

React hooks are entirely different architecture that differs from the existing component based architecture and also not all the hooks in component life cycle are not implemented in the react hooks yet. However react team have ensured 
the backward compatibility in their article, our React components can be used with the hooks. 

Please let us know, if you need further assistance on this 

Jayakumar D 

NP Nikunj Panchal September 10, 2019 11:59 PM UTC

Are React Hooks supported with Syncfusion React Dashboard layout?

AB Ashokkumar Balasubramanian Syncfusion Team September 11, 2019 12:03 PM UTC

Hello Ralf, 
Yes, react hooks is supported for Syncfusion Dashboard layout component. We have prepared a simple sample using react hooks and attached below for your reference. In this sample, we have performed the increment and decrement operation using react hooks in a button click which is rendered inside the dashboard layout component. 
Refer to the below sample link. 
Please let us know, if you require any further assistance. 
Ashokkumar B. 

CE Cedeg July 12, 2020 02:46 PM UTC


I'm trying to use react-hooks in Detail Template of grid component but i get this error : 

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

It seems we can't use hooks inside templates ?

Grid usage (in functional component):

<GridComponent  width="95%" dataSource={seances?.SeanceInfos}  detailTemplate={detailTemplate.bind(thisstagiaires)}>
        <ColumnDirective field='Id' headerText'Id' width='150' visible={false}/>
            <ColumnDirective  field="Date" headerText="Date de la séance info" width="110"></ColumnDirective>
            <ColumnDirective  field="SessionFormation.StartDate" headerText="Début de la formation" width="110"></ColumnDirective>
            <ColumnDirective  field="SessionFormation.EndDate" headerText="Fin de la formation" width="110"></ColumnDirective>
            <ColumnDirective  field="SessionFormation.Filiere.Name" headerText="Filière" width="110"></ColumnDirective>
        <Inject services={[GroupDetailRow]}/>

And template :

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { useMutation } from '@apollo/react-hooks'
import gql from 'graphql-tag'
  mutation addStagiaireToSeance($StagiaireId: Number!, $SeanceId: Number!) {
    createPost(StagiaireId: $title, SeanceId: $SeanceId) {

const detailTemplate = (stagiaires,seance=> {
    const [addStagiaireToSeance, { loading }] = useMutation(ADD_STAGIAIRE_TO_SEANCE_MUTATION)
    function AddStagiaire (event){
        const stagiaireId = event.value;
        const seanceId = seance.Id;
            variables: { stagiaireIdseanceId },
            update: (proxy, { data: { addStagiaireToSeance } })
    function RemoveStagiaire(stagseance){

  <div className="grid grid-cols-2 gap-4">
        <h4 className="text-md">Inscriptions</h4>
        <ul className="w-full max-w-md">
        {seance.StagiaireSeanceInfos.map((stagindex=> {
        return (
            <li key={index} className="p-4 mb-3 flex justify-between items-center bg-white shadow rounded-lg">
                <div className="flex items-center">
                    {stag.Stagiaire.Photo != null ?
                    (<img className="w-10 h-10 rounded-full" src={stag.Stagiaire.Photo} alt={stag.Stagiaire.Name}/>)
                    (<i className="w-10 h-10 fad fa-user fa-3x"></i>)
                    <p className="ml-2 text-gray-700 font-semibold font-sans tracking-wide">{stag.Stagiaire.FirstName + " " + stag.Stagiaire.Name}</p>

                <div className="flex">
                    <button aria-label="Delete user" className="p-1 focus:outline-none focus:shadow-outline text-red-500 hover:text-red-600" click="RemoveStagiaire(seance)">
                        <i className="fad fa-trash-alt fa-2x"></i>

    <DropDownListComponent dataSource={stagiaires?.Stagiaires} fields={value: 'Id'text:'Name' }}  allowFiltering="true" id="stagiaires" change={AddStagiaire} placeholder="Chercher un stagiaire" ignoreAccent={true} cssClass="self-start" >

export default detailTemplate;

MS Manivel Sellamuthu Syncfusion Team July 13, 2020 03:45 PM UTC

Hi Cedeg, 

Greetings from Syncfusion support. 

We can use hooks inside the templates of the Grid component. We have prepared sample that uses useState and suspense inside the template of the Grid component. Please refer the below sample for more information. 

Please let us know, if you need further assistance. 


Live Chat Icon For mobile
Up arrow icon