Sneak Peek: What is Visualforce Viewstate? and how to keep it lean

Note: The main content for this blog post was shared by my friend and colleague Shriram Kabra.

There are loads of blogs and articles around managing viewstate in Visualforce pages. As you would know, viewstate is primarily a serialized form of controller state between postbacks. It is very helpful to retain controller's state between client's browser and server.

How viewstate works?

Every time user opens a visualforce page, Salesforce executes related controller(s). As per controller logic, data is retrieved/ created within memory. This data can also be considered as controller state. If you monitor the lifecycle of Salesforce object (object of controller), it ends as soon as it responds to browser and loses its state. Technically, all subsequent requests for it are fresh page loads. In order for visualforce to retain this state between all postbacks, it needs to store this state somewhere. This is where Viewstate comes handy. While rendering visualforce page, Force.com engine serializes controller state to string and sends it within page's html content as viewstate (can view it when viewing source of a rendered visualforce page).

In all subsequent postbacks (for e.g. if user clicks on a button which invokes controller method), page sends viewstate back to Salesforce, which is deserialized to recreate state of controller since last postback. This helps in overall processing.

Issues while using Viewstate
Viewstate is quite helpful, as it auto-magically maintains state of controller and avoid developer to write more code to achieve it. But, it comes with its own cost.

Firstly, viewstate adds to the overall data to be downloaded, hence increases data to be downloaded to browser. Heavy viewstate leads to latency in page load or any subsequent user operations.

Secondly, Salesforce restricts viewstate size to a maximum of 135KB. Any page having viewstate greater than that will show a Salesforce thrown error "Maximum view state size limit (135KB) exceeded".

Standard solutions to reduce Viewstate footprint
There are some widely known solutions to manage viewstate, as mentioned below

1. Avoid using Forms: Well, it's simply killing the chicken, so there are no eggs. With no forms in visualforce page (and components), there is no state to be maintained. So try to reduce it as much as possible. For example, if the page just displays information, there is no need for input fields (and thus a form)
2. Minimize controller level properties: retain only important data within controller and avoid creating controller properties as much as possible. Use method level variables, which will be automatically disposed when request cycles ends, hence, will not be included within controller viewstate
3. Use transient properties: controller level properties which are not required to be retained within postbacks, can be marked as transient. By using transient keyword, Salesforce skips those properties for viewstate generation
4. Use Javascript Remoting: javascript remoting methods are stateless and as a result no data is saved within viewstate
5. Minimize data: reduce data volume to be retained at controller level. For e.g. if there are some records which are to be fetched only for display purposes, fetch them every time they are required, instead of retaining their data within controller
6. Avoid components using controller: if a visualforce component uses it's own controller, it's viewstate is also tied up with the viewstate of main page, further increasing the load. So, it is advisable to watch for components using their own controller

Internal Viewstate - The hidden viewstate

Now, as we have covered basics around viewstate, it's considerations and known solutions, we come to problem extension. Even after employing aforementioned techniques, we can often see that page's viewstate is still not very small, even if you have very few controller properties.

What is Internal viewstate?
While using Visualforce controllers and UI tags, Salesforce maintains internal data. This data is stored within Internal viewstate is not available for developers to view/ manipulate. It can increase in size depending on various factors such as:

1. Controllers/ forms being used in page (including controllers of components being used)
2. Visualforce tags being used
3. Any apex repeat tags being used 

Solutions to reduce Internal ViewState:

1. Use lesser Visualforce components and use more standard HTML components
2. Use Javascript Remoting to manage data being sent back and forth for each operation

Reference links:

• https://developer.salesforce.com/page/An_Introduction_to_Visualforce_View_State
• https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_best_practices_performance.htm