View state in Visualforce page

View state will get generated when we use<apex:form> tag not on HTML <form> tag.

Below is the list of tag where <apex:form> tag is required.

<apex:action*>

<apex:Command*>

<apex:InlineEditSupport>

<apex:Input*>

<apex:Select*>

How to Manage View State in Visualforce page.

1. Reduce Number of Components
2. Transient Keyword
3. Java Script Remoting
4. Streaming API.

Reduce the Number of Components:

using of pageblock table and pageblocks is fine, which will look simillar to salesforce user Interface, but try to avoid some below component instead you use HTML tags.

<apex:OutputPanel Layout="inline".... >          <span>

<apex:outputpanel layout ="block".....>          <div>

<apex:panelGrid.... >                                     <table>

<apex:outputlink....>                                      <a>

<apex:outputtext styleclass="".....>                 <span>

Transient Keyword

If the declared variable is going to display the values in the visualforce page then we can use Transient Keyword with that variable. It will reduce the view state.

Example

VF code:

<apex:page controller="TranController"  showHeader="false"
standardStylesheets="false">
 <apex:pageBlock >
<apex:pageBlockButtons location="top">
                    <apex:commandButton action="{!save}" value="Save"/>
 </apex:pageBlockButtons>
<apex:pageBlockSection columns="2">
                    <apex:inputField value="{!client.FirstName}"/>
                    <apex:inputField value="{!client.LastName}"/>
                    <apex:inputField value="{!client.Email}"/>
                    <apex:inputField value="{!client.Phone}"/>
                    <apex:inputField value="{!client.MobilePhone}"/>
                    <apex:inputField value="{!client.MailingStreet}"/>
</apex:pageblocksection>
</apex:pageblock>
<h3>Previous Employers</h3>
            <apex:dataTable value="{!previousEmployers}" var="e">
                <apex:column value="{!e.Name}"/>
            </apex:dataTable>
</apex:page>

Apex Code:

public with sharing class TranController{
    public Contact client { get; private set; }
     transient public List<Account> previousEmployers { get; private set; }
 
    public TranController() {
        this.client = retrieveClient();
        this.previousEmployers = retrievePreviousEmployers();
}

private Contact retrieveClient() {
        return [
            SELECT
                 Phone,
                MobilePhone,
                MailingStreet,
                LastName,
                FirstName,
                Email,
               FROM Contact
            LIMIT 1
        ];
    }

private List<Account> retrievePreviousEmployers() {
        List<Account> a = new List<Account>();
        a.add(new Account(Name = 'GE'));
        a.add(new Account(Name = 'Siemens'));
        a.add(new Account(Name = 'EADS'));
        return a;
    }
 public void save() {
        try {
            insert client;
        } catch (Exception x) {
            client.addError(x.getMessage());
        }
    }
}

JavaScript Remoting

Stateless way to call Apex Controller Methods from Javascript.

instead of using <apex:actionfunction..../> and <apex:actionsupport..../> we can use javascript remoting.

Streaming API

A highly performant way to get near real time updates from a salesforce instance without polling.

instead of using <apex:action:poller..../> we can use streaming API.

The above 4 methods will reduce the view state of visualforce.