PhpStorm Tricks

All "React" Snippets

perfHasChanged

Generate a console log to detect when a value has changed.

<template name="perfHasChanged" value="useEffect(() =&gt; {&#10;  console.log(&quot;[Perf: ⚡️Value changed] $DEPENDENCY_NAME$ has changed in $COMPONENT_NAME$&quot;, $DEPENDENCY_VALUE$);&#10;}, [$DEPENDENCY$])" toReformat="false" toShortenFQNames="true">
    <variable name="DEPENDENCY" expression="completeSmart()" defaultValue="" alwaysStopAt="true" />
    <variable name="COMPONENT_NAME" expression="jsMethodName()" defaultValue="" alwaysStopAt="false" />
    <variable name="DEPENDENCY_VALUE" expression="DEPENDENCY" defaultValue="" alwaysStopAt="false" />
    <variable name="DEPENDENCY_NAME" expression="capitalize(DEPENDENCY)" defaultValue="" alwaysStopAt="false" />
    <context>
        <option name="JS_STATEMENT" value="true" />
        <option name="TS_STATEMENT" value="true" />
    </context>
</template>

React Performance

Live template

perfHasChanged

Generate a console log to detect when a value has changed.

<template name="perfMount" value="useEffect(() =&gt; {&#10;      console.log('[Perf: 📦 Mounted] $COMPONENT_NAME$')&#10;    }, [])$END$" description="Add log to see component mounting" toReformat="false" toShortenFQNames="true">
    <variable name="COMPONENT_NAME" expression="jsMethodName()" defaultValue="" alwaysStopAt="false" />
    <context>
        <option name="JS_STATEMENT" value="true" />
        <option name="TS_STATEMENT" value="true" />
    </context>
</template>

React Performance

Live template

La couverture du guide gratuite avec 5 astuces pour améliorer la lisibilité des tests.

WTF ??

Tu veux améliorer la qualité de tes tests automatisés ? Ne cherche plus !

Télécharge ton guide gratuit qui contient 5 astuces pratiques pour améliorer la lisibilité de tes tests automatisés.

Dans ce guide, tu découvriras des conseils essentiels pour organiser le contenu de tes tests et améliorer leur lisibilité et leur maintenance.

Télécharger le guide !

perfRender

Generate a console log helping to detect React component rendering.

<template name="perfRender" value="console.log('[Perf: 🔄 Render] $COMPONENT_NAME$')$END$" description="Add log to see component re-rendering" toReformat="false" toShortenFQNames="true">
    <variable name="COMPONENT_NAME" expression="jsMethodName()" defaultValue="" alwaysStopAt="false" />
    <context>
        <option name="JS_STATEMENT" value="true" />
        <option name="TS_STATEMENT" value="true" />
    </context>
</template>

React Performance

Live template