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

Do you speak French and want to stop hating your tests ?

A cover picture saying "Améliorez vos tests automatisés" with a burrito.

I've created a course to help developers to improve their automated tests.

I share ideas and technics to improve slow, flaky, failing for unexpected reason and hard to understand tests until they become tests we take joy to work with !

But you'll need to understand French...

😯 But, I speak French !

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