PhpStorm Live Template & Postfix Snippets

All "Performance" Snippets

perfHasChanged

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

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

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

perfRender

Generate a console log helping to detect React component rendering.

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