View State Overview #inSalesforce

View State Size

• The view state size of your Visualforce pages must be under 170KB. By reducing your view state size, your pages can load faster.
• You can monitor view state performance through the View State tab in the development mode footer.

Please note,

• Use the transient keyword in your Apex controllers for variables that aren’t essential for maintaining state.
• If your view state is affected by a large component tree, try reducing the number of components your page depends on.

Related Error: Document upload error 'Maximum view state size limit (170KB) exceeded':

• The View State tab helps to monitor view state performance or shows you which elements on your page are taking up that space.
• A smaller view state size generally means faster load times.

So, resolution to the above error is -

• Minimize your pages' view state like you can optimize your Apex controller code.

Example like if large percentage of your view state comes from objects used in controllers or controller extensions, consider refining your SOQL calls to return only data that's relevant to the Visualforce page. If your view state is affected by a large component hierarchy, try reducing the number of components your page depends on.

View State Tab: This is to  examine the view state for a Visualforce page request.

Enable View State Tab:

Steps:

From your personal settings | enter Advanced User Details in the Quick Find box | then select Advanced User Details. (or Enter Personal Information in the Quick Find box, then select Personal Information.)

Click Edit | Select the Development Mode checkbox if it isn't selected | Select the Show View State in Development Mode checkbox | Click Save.

Remember, view state is linked to form data, the View State tab only appears if your page contains an <apex:form> tag.

Additionally, the View State tab displays only on pages using custom controllers or controller extensions.

Code Example:

samplePage

<apex:page controller="sampleController">

sampleTime: {!timing} <br/><br/>

Time-Transient: {!timingTransient} <br/><br/>

    <apex:form >

        <apex:commandLink value="click to Refresh"/>

    </apex:form>

</apex:page>

sampleController

public class sampleController {

    DateTime timing;

    transient DateTime timingTransient; 

    public String getTimingTransient() {

        if (timingTransient == null){

            timingTransient = System.now();

        }

        return '' + timingTransient;

    }

    public String getTiming() {

        if (timing == null){

            timing = System.now();

        }

        return '' + timing;

    }

}

Visual: https://www.youtube.com/watch?v=ouuYJpse6XA

Reference:

https://developer.salesforce.com/docs/atlas.en-us.salesforce_visualforce_best_practices.meta/salesforce_visualforce_best_practices/pages_best_practices_perf_code_view_state.htm

https://help.salesforce.com/s/articleView?id=sf.code_dev_console_tab_view_state.htm&type=5