Modern React - Hooks/Suspense

[Ralf Haug]

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?

[Jayakumar Duraisamy]

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.  

Regards, 

Jayakumar D 

[Jayakumar Duraisamy]

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 

 

Regards, 

Jayakumar D 

[Nikunj Panchal]

Are React Hooks supported with Syncfusion React Dashboard layout?

[Ashokkumar Balasubramanian]

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. 

 

https://codesandbox.io/s/react-hooks-counter-demo-shfpt 

 

Please let us know, if you require any further assistance. 

 

Regards, 

Ashokkumar B. 

[Cedeg]

Hello,

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(this, stagiaires)}>

        <ColumnsDirective>

        <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={[Group, DetailRow]}/>

        </GridComponent> 

And template :

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';

import { useMutation } from '@apollo/react-hooks'

import gql from 'graphql-tag'

const ADD_STAGIAIRE_TO_SEANCE_MUTATION = gql`

  mutation addStagiaireToSeance($StagiaireId: Number!, $SeanceId: Number!) {

    createPost(StagiaireId: $title, SeanceId: $SeanceId) {

      id

    }

  }

`

const detailTemplate = (stagiaires,seance) => {

    const [addStagiaireToSeance, { loading }] = useMutation(ADD_STAGIAIRE_TO_SEANCE_MUTATION)

    function AddStagiaire (event){

        console.log(event);

        const stagiaireId = event.value;

        const seanceId = seance.Id;

        addStagiaireToSeance({

            variables: { stagiaireId, seanceId },

            update: (proxy, { data: { addStagiaireToSeance } })

        }

        )

    }

    function RemoveStagiaire(stagseance){

        console.log(stagseance);

    }

    return(

  <div className="grid grid-cols-2 gap-4">

    <div>

        <h4 className="text-md">Inscriptions</h4>

        <ul className="w-full max-w-md">

        {seance.StagiaireSeanceInfos.map((stag, index) => {

        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>

                <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>

                    </button>

                </div>

            </li>

            )

        })}

        </ul>

    </div>

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

    </DropDownListComponent> 

  </div>

    )

    }

export default detailTemplate;

[Manivel Sellamuthu]

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. 

Sample: https://codesandbox.io/s/142135-hooks-functional-component-gp8oo?file=/src/index.js 

Please let us know, if you need further assistance. 

Regards, 

Manivel